js模态框实现原理
博客专区 > mj4738 的博客 > 博客详情
js模态框实现原理
mj4738 发表于3年前
js模态框实现原理
  • 发表于 3年前
  • 阅读 14517
  • 收藏 12
  • 点赞 1
  • 评论 6

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 本文介绍如何通过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;
		     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下会存在问题,解决办法参考 这里




标签: css javascript html
  • 点赞
  • 收藏
  • 分享
mj4738
粉丝 293
博文 478
码字总数 119327
评论 (6)
许雷神
谢谢
liujiduo
这是模态吗
mj4738

引用来自“liujiduo”的评论

这是模态吗
?
dzp443366
不生效
mj4738

引用来自“dzp443366”的评论

不生效
怎么不生效
sunyitao
有问题的,