js模态框实现原理

最新推荐文章于 2024-09-15 22:31:42 发布

weixin_33862041

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量92

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/aiguozhe/blog/279992

版权

2019独角兽企业重金招聘Python工程师标准>>>

虽然现在开源社区上有各种功能强大的模态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下会存在问题，解决办法参考这里

转载于:https://my.oschina.net/aiguozhe/blog/279992