JS实现的添加弹出层并完成锁屏操作示例
2017-04-07 08:58
791 查看
本文实例讲述了JS实现的添加弹出层并完成锁屏操作。分享给大家供大家参考,具体如下:
上图:
代码:
<html> <head> <title>弹出层</title> <style type="text/css"> *{ padding:0px; margin:0px; } .up{ width:500px; height: 400px; border:1px solid silver; position: absolute; display: none; z-index: 9999; background:#fff; /* top:50%; left: 50%;*/ /* margin-left: -250px; margin-top: -200px;*/ } .up h2{ background-color: #f2f2f2; text-align: center; } .con span{ width:20px; height:30px; text-align: center; line-height: 30px; background-color:red; cursor: pointer; } .mask{ width:3000px; height: 3000px; background:#000; opacity: 0.3; position: absolute; top:0; left: 0; z-index: 9998; display:none; } </style> </head> <body> <div class="con"> <span id="open">打开弹出层</span> </div> <div class="up" id="up"> <h2>弹出层效果</h2> <span id="close">关闭</span> </div> <img src="a.jpg"> </body> <script type="text/javascript"> //两种方式实现div居中:1:用css方式:top:50%,left:50%; margin-let:-divwidth/2 margin-top:divheight/2; 2:用js实现:获取窗口的高宽,top=(屏幕高-div高)/2,为了随时的监听浏览器的改变,需要用到浏览器事件 window.onload=function(){ function $(id){ return document.getElementById(id); } //将div的位置封装在一个函数内部,直接调用 function myDiv(){ var mTop=(document.documentElement.clientHeight-500)/2; var mleft=(document.documentElement.clientWidth-400)/2; $("up").style.top=mTop+"px"; $("up").style.left=mleft+"px"; } myDiv(); $("open").onclick=function(){ $("up").style.display="block"; mask.style.display="block"; } $("close").onclick=function(){ $("up").style.display="none"; mask.style.display="none" } //创建一个DIV var mask=document.createElement("div"); // //给这个DIV一个id和class属性 // mask.id="mask"; mask.className="mask"; mask.style.width=document.documentElement.clientWidth; mask.style.height=document.documentElement.clientHeight; //将这个DIV放置到body里面--》一般是:父节点.appendChild(子节点) //这里注意的是absolute,要设置top和left; document.body.appendChild(mask); //屏幕改变大小的时候,div不会自动的改变,需要添加窗口改变事件 window.onresize=function(){ myDiv(); mask.style.width=document.documentElement.clientWidth; mask.style.height=document.documentElement.clientHeight; } } </script> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- js写一个弹出层并锁屏效果实现代码
- js实现div弹出层的方法
- 使用js实现关闭js弹出层的窗口
- js 点击页面其他地方关闭弹出层(示例代码)
- js与css实现弹出层覆盖整个页面的方法
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
- Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
- Js Jquery创建一个弹出层可加载一个页面
- html+javascript实现可拖动可提交的弹出层对话框效果
- js弹出层永远居中实现思路及代码
- js弹出层(jQuery插件形式附带reLoad功能)
- js setTimeout实现延迟关闭弹出层
- MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
相关文章推荐
- JS实现为动态创建的元素添加事件操作示例
- 利用JS实现为数字添加千分位的操作
- js操作CheckBoxList实现全选/反选(在客服端完成)
- js简单的表格添加行和删除行操作示例
- js中confirm实现执行操作前弹出确认框的方法
- js中confirm实现执行操作前弹出确认框的方法
- 简单js实现弹出登陆框div层,背景变暗不可操作
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 【转】js操作html的table,包括添加行,添加列,删除行,删除列,合并单元格(未实现)
- Jquery和js实现cookie操作手机浮层广告;附加:js获取、添加、删除cookie
- js实现删除等其他操作弹出的提示框
- js操作html的table,包括添加行,添加列,删除行,删除列,合并单元格(未实现,可参考代码)
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- js实现弹出窗口、页面变成灰色并不可操作的例子分享
- js操作ListBox实现多项的添加和删除
- js写一个弹出层并锁屏效果实现代码
- js实现动态添加、删除行、onkeyup表格求和示例
- 使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
- js实现弹出窗口、页面变成灰色并不可操作的例子分享