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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
在node中如何使用 ES6
Apr 22 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
微信小程序block的使用教程
Apr 01 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 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
再说下636单管机
2021/03/02 无线电
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
两个强悍的php 图像处理类1
2009/06/15 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
Laravel find in set排序实例
2019/10/09 PHP
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
JQuery球队选择实例
2015/05/18 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
食品安全责任书
2014/04/15 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书