本文实例讲述了JS实现的添加弹出层并完成锁屏操作。分享给大家供大家参考,具体如下:
上图:
代码:
& lt; html>
& lt; head>
& lt; title>弹出层& lt;/title>
& lt;风格类型=" text/css "比;
* {
填充:0 px;
保证金:0 px;
}
.up {
宽度:500 px;
身高:400 px;
边界:1 px固体银;
位置:绝对的;
显示:没有;
z - index: 9999;
背景:# fff;/*:50%;
左:50%;*//* margin-left: -250 px;
margin-top: -200 px; */}
.up h3 {
background - color: # f2f2f2;
text-align:中心;
}
.con跨度{
宽度:20 px;
高度:30 px;
text-align:中心;
行高:30 px;
背景颜色:红色;
光标:指针;
}
.mask {
宽度:3000 px;
身高:3000 px;
背景:# 000;
透明度:0.3;
位置:绝对的;
上图:0;
左:0;
z - index: 9998;
显示:没有;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=捌北?
& lt;跨度id=翱拧钡脑诖蚩霾? lt;/span>
& lt;/div>
& lt; div类="了" id=吧稀痹?
& lt; h3>弹出层效果& lt;/h3>
& lt;跨度id=肮乇铡钡脑诠乇? lt;/span>
& lt;/div>
& lt; img src=" https://www.yisu.com/zixun/a.jpg "比;
& lt;/body>
& lt;脚本type=" text/javascript祝辞//两种方式实现div居中:1:用css方式::50%,左:50%;margin-let: -divwidth/2 margin-top: divheight/2;2:用js实现:获取窗口的高宽,顶部=(屏幕高div高)/2,为了随时的监听浏览器的改变,需要用到浏览器事件
window=function () {
函数$ (id) {
返回. getelementbyid (id);
}//将div的位置封装在一个函数内部,直接调用
函数myDiv () {
var mTop=(document.documentelement.clientheight - 500)/2支持;
var mleft=(document.documentelement.clientwidth - 400)/2;
美元(“向上”).style.top=mTop +支持“px”;
美元(“”).style.left=mleft +“px”;
}
myDiv ();
$(“开放”).onclick=function () {
美元(“向上”).style.display=翱椤?
mask.style.display=翱椤?
}
$(“关闭”).onclick=function () {
美元(“向上”).style.display=懊挥小?
mask.style.display="没有"
}//创建一个DIV
var=document.createElement面具(" div ");////给这个DIV一个id和类属性//mask.id=懊婢摺?
mask.className=懊婢摺?
mask.style.width=document.documentElement.clientWidth;
mask.style.height=document.documentElement.clientHeight;//将这个DIV放置到身体里面——》一般是:父节点.appendChild(子节点)//这里注意的是绝对的,要设置顶部和左;
document.body.appendChild(面具);//屏幕改变大小的时候,div不会自动的改变,需要添加窗口改变事件
window.onresize=function () {
myDiv ();
mask.style.width=document.documentElement.clientWidth;
mask.style.height=document.documentElement.clientHeight;
}
}
& lt;/script>
& lt;/html>
之前
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》,《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》,《JavaScript中json操作技巧总结》,《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
