-
模態框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>
