-
模态框1
思路
1.界面点击按钮
2.遮罩层
3.带确定按钮等的一个小页面
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .content { height: 1080px; background-color: pink; } .shade { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.5; } .model { width: 200px; height: 200px; background-color: bisque; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide { display: none; } </style> </head> <body> <div class="content"> <button onclick="func()">show</button> <!-- 界面点击按钮 --> hello world </div> <!-- 遮罩层 --> <div class="shade hide"></div> <!-- 带确定按钮等的一个小页面 --> <div class="model hide"> <button onclick="cancel()">show</button> </div> <script type="text/javascript"> function func(argument) { // 界面按钮点击时取消隐藏的元素（显示小页面和遮罩层） var ele_shade = document.getElementsByClassName('shade')[0] ele_model.classList.remove("hide") var ele_model = document.getElementsByClassName('model')[0] ele_shade.classList.remove("hide") } function cancel() { // 点击小页面按钮时隐藏小页面和遮罩层 var ele_shade = document.getElementsByClassName("shade")[0] var ele_model = document.getElementsByClassName("model")[0] ele_model.classList.add("hide") ele_shade.classList.add("hide") } </script> </body> </html>
模态框2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #0f0f0f; opacity: 0.5; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: #f9f9f9; position: fixed; left: 50%; top: 50%; margin-top: -200px; margin-left: -250px; z-index: 10; } .hide{ display: none; } </style> </head> <body style="margin: 0;"> <div> <input type="button" value="添加" onclick="ShowMod();"> </div> <!--遮罩层开始--> <div id='id1' class="c1 hide"> </div> <!--遮罩层结束--> <!--弹出框开始--> <div id='id2' class="c2 hide"> <p class="=c3"><input type="text" placeholder="username"></p> <p><input type="password" placeholder="password"></p> <p><input type="button" value="取消" onclick="HideMod();"> <input type="button" value="确定"></p> </div> <!--弹出框结束--> <script> function ShowMod() { document.getElementById('id1').classList.remove('hide'); document.getElementById('id2').classList.remove('hide'); } function HideMod() { document.getElementById('id1').classList.add('hide'); document.getElementById('id2').classList.add('hide'); } </script> </body> </html>
模态框3
- 思路：
- 小页面放在遮罩层里面
- CSS属性控制有和无
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>mt</title> <style type="text/css"> /* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { display: none; position: absolute; /* 使用绝对定位或固定定位 */ left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1000; background-color: #333; opacity: 0.5; /* 背景半透明 */ } /* 模态框样式 */ .modal-data { width: 300px; margin: 100px auto; background-color: #fff; border: 1px solid #000; padding: 15px; text-align: center;/* 文本对其方式 */ } </style> </head> <body> <input type="button" name="" id="" value="淡出模态框" onclick="overlay()" /> <div id="modal-overlay"> <div class="modal-data"> <p>一个很简单的模态对话框 </p> <p>点击<a onclick="overlay()" href="">这里</a>关闭</p> </div> </div> <script type="text/javascript"> function overlay() { var e1 = document.getElementById('modal-overlay'); e1.style.display = (e1.style.display == "block") ? "none" : "block"; } </script> </body> </html>
