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

2019-11-19 16:42:40

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：Nodejs读取文件时相对路径的正确写法(使用fs模块)

下一篇：JavaScript通过改变文字透明度实现的文字闪烁效果实例