JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码


Posted in Javascript onApril 21, 2018

1.首先写一个遮罩层div,然后再写一个弹窗的div

<!-- 遮罩层 -->
<div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 ">
  
</div>
<!-- 弹窗 -->
<div id="showdiv" style="width: 80%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 40%; left: 10%; z-index: 3; background: #fff">
  <!-- 标题 -->
  <div style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >
    提示
  </div>
  <!-- 内容 -->
  <div style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; ">
    js弹窗 js弹出DIV,并使整个页面背景变暗</div>
  <!-- 按钮 -->
  <div style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow()">
    确 定
  </div>
</div>

js代码:(把jq引进来)

<script type="text/javascript">
  // 弹窗
  function showWindow() {
    $('#showdiv').show();  //显示弹窗
    $('#cover').css('display','block'); //显示遮罩层
    $('#cover').css('height',document.body.clientHeight+'px'); //设置遮罩层的高度为当前页面高度
  }
  // 关闭弹窗
  function closeWindow() {
    $('#showdiv').hide();  //隐藏弹窗
    $('#cover').css('display','none');   //显示遮罩层
  }
</script>

效果:

JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码

总结

以上所述是小编给大家介绍的JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
动态加载script文件的两种方法
Aug 15 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
JavaScript调用模式与this关键字绑定的关系
Apr 21 #Javascript
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 #Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 #Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 #Javascript
vue源码解析之事件机制原理
Apr 21 #Javascript
You might like
PHP 翻页 实例代码
2009/08/07 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
银行介绍信范文
2014/01/10 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
MySQL学习之基础操作总结
2022/03/19 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server