用CSS和js实现模态框

最新推荐文章于 2024-05-09 09:54:33 发布

Eveweiscsdn

最新推荐文章于 2024-05-09 09:54:33 发布

阅读量5k

点赞数

分类专栏： css3 html5 javascript 文章标签： html css javascript

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/53333333

版权

javascript 同时被 3 个专栏收录

68 篇文章 1 订阅

订阅专栏

css3

40 篇文章 0 订阅

订阅专栏

html5

28 篇文章 1 订阅

订阅专栏

用CSS和JS改变z-index的属性值就可以实现模态框

<html>
<head>
	<title>modal box</title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
}
</style>
</head>
<body>
<!--先在CSS里面把zindex的值设为负值让其在背景图片后面-->
<div style="background:url(http://pic.90sjimg.com/back_pic/00/04/27/49/5b1eee8bdba7b9aefc62fccafe72737c.jpg);width:100%;height:800px;z-index:1;">
	<button  id="modal-box">弹框</button>
	<div id="modal-show" style="position:fixed;z-index:-9999;width:100%;height:100%;background-color:rgba(236, 214, 214, 0.2);">	
	</div>
	<div id="modal-show2" style="position:fixed;z-index:-9999;width:30%;height:30%;margin:200px auto;border:1px solid red;">	
			欢迎你登录
	</div>

</div> 

<script type="text/javascript">   
document.getElementById("modal-box").οnclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面
{
	document.getElementById("modal-show").style.zIndex = "1";
	document.getElementById("modal-show2").style.zIndex = "1";
};

document.getElementById("modal-show").οnclick=function()//点击模态框的透明背景时，模态框的zIndex值变为-9999，会隐藏在
{								背景图片的后面，点击模态框本身是不会消失的

	this.style.zIndex = "-9999";
	document.getElementById("modal-show2").style.zIndex = "-9999";
};


</script>

</body>
</html>

Eveweiscsdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS和js实现模态框

用CSS和JS改变z-index的属性值就可以实现模态框 modal box*{ margin:0px; padding:0px;} 弹框欢迎你登录 document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面{
复制链接

扫一扫