JS简单实现点击按钮或文字显示遮罩层的方法


Posted in Javascript onApril 27, 2017

本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下:

运行效果图如下:

JS简单实现点击按钮或文字显示遮罩层的方法

完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>点击文字弹出一个DIV层窗口代码</title>
    <meta charset="urf-8"/>
    <style>
    .black_overlay{
      display: none;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index:1001;
      -moz-opacity: 0.8;
      opacity:.80;
      filter: alpha(opacity=88);
    }
    .white_content {
      display: none;
      position: absolute;
      top: 25%;
      left: 25%;
      width: 55%;
      height: 55%;
      padding: 20px;
      border: 10px solid orange;
      background-color: white;
      z-index:1002;
      overflow: auto;
    }
  </style>
  </head>
  <body>
    <p>示例弹出层:<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>
    <div id="light" class="white_content">这是一个层窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div>
    <div id="fade" class="black_overlay"></div>
  </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 链式延迟执行DOME
Jan 04 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue中实现高德定位功能
Dec 03 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 #Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
Three.js的使用及绘制基础3D图形详解
Apr 27 #Javascript
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 #Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 #Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
js 分栏效果实现代码
2009/08/29 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
几个判断型的面试题
2012/07/03 面试题
入党积极分子介绍信
2014/01/17 职场文书
运动会四百米广播稿
2014/01/19 职场文书
公务员综合考察材料
2014/02/01 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang