js模态框实现原理

https://my.oschina.net/aiguozhe/blog/279992

摘要: 本文介绍如何通过html+css+Javascript实现一个简单的模态对话框。

虽然现在开源社区上有各种功能强大的模态JS框库或JS插件，但大都需要依赖jQuery, 对于使用Zepto的移动端来说不太适合，而且很多功能都不需要。其实要实现一个简单的模态对话框，只需几行HTML+css+js代码就能搞定。

首先在html上定义两个div元素，其中外层div表示模态框外面的覆盖层(overlay layer), 内层的div表示模态框

<div id="modal-overlay">
<div class="modal-data">
<p>一个很简单的模态对话框 </p>
<p>点击<a onclick="overlay()" href="">这里</a>关闭</p>
</div>
</div>
接着分别为两个div定义样式：

/* 定义模态对话框外面的覆盖层样式 */
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
}
/* 模态框样式 */
.modal-data{
300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
最后添加一个控制模态框显示与隐藏的函数

function overlay(){
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible";
}
完整的例子见 这里

 如果模态框里包含<select>元素，在IE6下会存在问题，解决办法参考 这里