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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
javascript读写json示例
Apr 11 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
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 输出URL的快捷方式示例代码
2013/09/22 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JSONP之我见
2015/03/24 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python中学习K-Means和图片压缩
2017/11/20 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
golang中字符串MD5生成方式总结
2021/07/04 Golang