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 CSS操作方法集合
Oct 31 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
vue初始化动画加载的实例
Sep 01 Javascript
详解vue高级特性
Jun 09 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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
在普通HTTP上安全地传输密码
2007/07/21 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python-基础-入门 简介
2014/08/09 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python实现车牌识别的示例代码
2019/08/05 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Python实现区域填充的示例代码
2021/02/03 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
小学社团活动总结
2014/06/27 职场文书
大专毕业生求职信
2014/07/05 职场文书
财务会计求职信范文
2015/03/20 职场文书
Python中文纠错的简单实现
2021/07/07 Python