JS实现的添加弹出层并完成锁屏操作示例


Posted in Javascript onApril 07, 2017

本文实例讲述了JS实现的添加弹出层并完成锁屏操作。分享给大家供大家参考,具体如下:

上图:

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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
JavaScript函数节流的两种写法
Apr 07 #Javascript
原生JS实现圆环拖拽效果
Apr 07 #Javascript
Zepto实现密码的隐藏/显示
Apr 07 #Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 #Javascript
详解JS中遍历语法的比较
Apr 07 #Javascript
JavaScript原生数组Array常用方法
Apr 06 #Javascript
微信小程序 图片宽度自适应的实现
Apr 06 #Javascript
You might like
PHP提取中文首字母
2008/04/09 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
动态添加js事件实现代码
2009/03/12 Javascript
js 对象是否存在判断
2009/07/15 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
原生JS轮播图插件
2017/02/09 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
python列表与元组详解实例
2013/11/01 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Django保护敏感信息的方法示例
2019/05/09 Python
详解Python字符串切片
2019/05/20 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
个人评价范文分享
2014/01/11 职场文书
自我鉴定书面格式
2014/01/13 职场文书
实用的简历自我评价
2014/03/06 职场文书
2014年减负工作总结
2014/12/10 职场文书
内乡县衙导游词
2015/02/05 职场文书
同意报考证明
2015/06/17 职场文书
人与自然的观后感
2015/06/18 职场文书
拿破仑传读书笔记
2015/07/01 职场文书