<!DOCTYPE> <html> <head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ left: 0; top: 0; width:100%; height:100%; text-align:center; 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> <div id="modal-overlay" style="visibility: hidden;"> <div class="modal-data"> <p>一个很简单的模态对话框 </p> <p>点击<a onclick="overlay()" href="">这里</a>关闭</p> </div> </div> <a href="#" onclick="overlay()">显示模态对话框</a> <script>function overlay(){ var e1 = document.getElementById(‘modal-overlay‘); e1.style.visibility = (e1.style.visibility == "visible")? "hidden" : "visible"; }</script> </body> </html>
原文：https://www.cnblogs.com/xiaoqi2018/p/10558998.html