js模态框实现原理

虽然现在开源社区上有各种功能强大的模态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;
		     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;
		}

最后添加一个控制模态框显示与隐藏的函数

function overlay(){
    var e1 = document.getElementById('modal-overlay');			
    e1.style.visibility =  (e1.style.visibility == "visible"  ) ? "hidden" : "visible";
}

完整的例子见 这里

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