HTML中如何用DIV CSS javascript模拟实现模态窗口的d出？_随笔

锁屏效果的原理：共3层，最里面一层是网页的内容，其次一层是透明层，最外面一层是d出窗口，而控制这三层显示先后顺序的是z-index值，z-index值越大越靠近外面，若理解不了，你可以这样想：在数学里，我们有学过直角坐标系吧，里面分为x轴、y轴、z轴，其中z-index你可以看成是z轴，z轴的值是不是，越往外，值越大。只要将这三层的z-index值设为不同，在最外面的d出框那层z-index值设为最大，然后将中间那层的透明度改小一点，就好了。

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

[html] view plain copy

<html>

<head>

<title>modal box</title>

margin:0px

padding:0px

}

</style>

</head>

<body>

</div>

欢迎你登录

</div>

document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面

{

document.getElementById("modal-show").style.zIndex = "1"

document.getElementById("modal-show2").style.zIndex = "1"

}

document.getElementById("modal-show").onclick=function()//点击模态框的透明背景时，模态框的zIndex值变为-9999，会隐藏在

{<span style="white-space:pre"></span>背景图片的后面，点击模态框本身是不会消失的<span style="white-space:pre">

</span>

this.style.zIndex = "-9999"

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

}

</script>

</body>

</html>

modal默认隐藏需要采用aria-hidden='true'设定。其实modal已经执行了并且打开了，但是由于你添加hide类，所以整个modal就被隐藏了。另外你的整个modal框架缺少div.modal-dialog和div.modal-content两个元素包裹，否则样式比较难看的。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7382863.html

HTML中如何用DIV CSS javascript模拟实现模态窗口的d出？

发表评论

评论列表（0条）