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

更新时间：2017年04月27日 15:23:25 作者：David_黎

这篇文章主要介绍了JS简单实现点击按钮或文字显示遮罩层的方法,涉及javascript鼠标事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了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窗口操作与技巧汇总》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

JS
遮罩层

在浏览器测试JavaScript的方法小结
测试JavaScript代码是一件很痛苦的事情，很多情况下都是写好代码不断刷新测试，其实chrome浏览器的console下就很方便，这里就为大家简单分享一下
2023-03-03
浅谈webpack打包生成的bundle.js文件过大的问题
下面小编就为大家分享一篇浅谈webpack打包生成的bundle.js文件过大的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
JavaScript中setTimeout()的具体用法
本文主要介绍了JavaScript中setTimeout()的具体用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Javascript JSQL，SQL无处不在，
上回说到，操作Object Array
2010-05-05
uniapp实现app热更新的方法
本文主要介绍了uniapp实现app热更新的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
uniapp动态修改元素节点样式详解
这篇文章主要介绍了uni-app动如何态修改元素节点样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-08-08
JavaScript正则表达式的贪婪匹配和非贪婪匹配
所谓贪婪匹配就是匹配重复字符是尽可能多的匹配，非贪婪匹配就是尽可能少的匹配，下面通过一个例子给大家分享JavaScript正则表达式的贪婪匹配和非贪婪匹配，感兴趣的朋友参考下吧
2017-09-09
use jscript with List Proxy Server Information
use jscript with List Proxy Server Information...
2007-06-06
js设置默认时间跨度过程详解
这篇文章主要介绍了js设置默认时间跨度过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
多浏览器兼容的获取元素和鼠标的位置的js代码
获取元素和鼠标的位置（兼容IE6.0,IE7.0,IE8.0,FireFox2.0,FireFox3.5,Opera），该功能是我一同事钻研出来的，目标是为了实现与QQ自定义布局和拖放模块类似的功能。
2009-12-12