首先是html的结构，一个大的盒子用来做模糊的背景，其中的小盒子用来做模态框。
模态框.png
<div id="modal-overlay"> <div class="modal-data"> <p>一个很简单的模态对话框 </p> <p>点击<a onclick="overlay()" href="">这里</a>关闭</p> </div> </div>接下来是css部分，
#modal-overlay { visibility: hidden;/*控制模态框的显示*/ position: absolute; /* 使用绝对定位或固定定位 */ left: 0px; top: 0px; 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;/* 内部文字居中显示*/ }最后是js部分，
function overlay(){ var e1 = document.getElementById('modal-overlay'); e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible"; }
网友评论