layerjs的实现原理
layer是一个基于jquery实现的弹窗层js库。
它可以实现类似于window.alert(),window.prompt()类似的弹窗效果，而且功能更丰富，支持弹窗中嵌入ifarme，任何html标签。
假如我们要自己实现弹窗的功能，该如何？
那么先要了解，弹窗是什么。
打开它的demo，用浏览器的标签查看功能，即可知道弹窗其实就是一个div标签（其实其他标签也可以）。
当然，要对这个div应用一些特殊的样式。
同时，为了实现模态效果，还要额外再加一个div标签，应用一些样式。
具体样式如下：
#layer{
top:50px;/*指定位置*/
left:100px;
width:800px;
height:300px;
position:fixed;/*使用固定定位*/
z-index:2000;/*使其在页面其他元素之上*/
background-color:red;
}
#modal{
opacity:0.3;/*透明度*/
top:0;/*模态div位置*/
left:0;
width:100%;/*模态铺满页面*/
height:100%;
position:fixed;/*使用固定定位*/
z-index:1999;/*这个要比layer的z-index值小，同时要比页面上其他元素的z-index大才能实现模态效果*/
background-color:gray;
}
完整demo如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#layer{
top:50px;
left:100px;
width:800px;
height:300px;
position:fixed;
z-index:2000;
background-color:red;
}
#modal{
opacity:0.3;
top:0;
left:0;
width:100%;
height:120%;
position:fixed;
z-index:1999;
background-color:gray;
}
</style>
<script>
</script>
</head>
<body>
hello
<div id="layer">layer</div>
<div id="modal">
</div>
world
</body>
</html>
浙公网安备 33010602011771号