一、模态框
模态框用的是固定定位设置z-index值来实现,
要注意z-index的值,要始终保持模态框的对话框z-index是在最大。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用模态框</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ visibility: hidden; } .bg{ position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; } .dialog-box{ position: fixed; width: 300px; height: 300px; background-color: white; top: 50%; left: 50%; transform: translate(-150px,-150px); z-index: 1001; border-radius: 5px; } .exit{ width: 30px; height: 30px; float: right; background-color: darkgreen; border-radius: 5px; text-align: center; line-height: 30px; cursor: pointer; } .exit:hover{ background-color: red; color: #ffffff; } </style> </head> <body> <button id="btn">点击出现模态框</button> <div id="container" class="container"> <div class="bg"></div> <div class="dialog-box"> <a id="exit" class="exit">x</a> </div> </div> </body> </html> <script type="text/javascript"> function $(id) { return document.getElementById(id); } window.onload=function () { $('btn').onclick=function () { $('container').style.visibility='visible'; }; $('exit').onclick=function () { $('container').style.visibility='hidden'; }; } </script>