原生js创建模态框
1.效果圖如下：
2.代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style>#pageMask {visibility: hidden; position: absolute;left: 0px; top: 0px;width:100%;height:100%;text-align: center;z-index: 1100;background-color: #333; opacity: 0.6;}#ModalBody{background: white;width: 50% !important;height: 50% !important;position:absolute;left: 25%;top: 25%;z-index: 1101;border: 1px solid;display: none;}#closeModalBtn{position: static;margin-top: 5px;margin-right: 1%;float: right;font-size: 14px;background: #ccc0;cursor: pointer;} </style> </head> <body><div class="content"><h1>Test Modal</h1><div id="pageMask"></div> <!--遮蓋層--><button class="showModalBtn" id="showModalBtn">Btn</button><div> <!--主頁面-->Page Content...</div></div><div id="ModalBody"> <!--模態框--><button id="closeModalBtn" style="display: none;">Close</button><div>Test Modal Body...</div></div><script>window.onload = function(){expandIframe();}function expandIframe(){var mask = document.getElementById("pageMask");var modal = document.getElementById("ModalBody");var closeBtn = document.getElementById("closeModalBtn");var btn = document.getElementById("showModalBtn");btn.onclick = function(){modal.style.display = (modal.style.display == "block")? "none" : "block";closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";}closeBtn.onclick = function(){modal.style.display = (modal.style.display == "block")? "none" : "block";closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";}}</script> </body> </html>本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=h00ii1aa&title=原生js創建模態框
總結
- 上一篇： 关于换行这个动作，win 和 mac 的
- 下一篇： 深入css布局 (1) — 盒模型 元