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

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

赞 (0)

相关推荐

  • js鼠标悬浮出现遮罩层的方法

    本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl">          <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008

  • 通过遮罩层实现浮层DIV登录的js代码

    这个就没什么好说的了..直接上代码啊!! 首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框. 复制代码 代码如下: <body> <div id="shade"></div> <div> <a onclick="login()" style="cursor:pointer">登录</a> </div> <br/> 什么都没有用...&l

  • JS实现遮罩层效果的简单实例

    复制代码 代码如下: function show(){ var cover = document.getElementById("cover"); cover.style.width = document.documentElement.scrollWidth+"px"; cover.style.height = document.documentElement.scrollHeight+"px"; cover.style.display = &

  • js点击按钮实现带遮罩层的弹出视频效果

    js点击按钮实现带遮罩层的弹出视频效果

    本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

  • 原生js实现半透明遮罩层效果具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • css+js实现部分区域高亮可编辑遮罩层

    css+js实现部分区域高亮可编辑遮罩层

    想大家都做过遮罩层这种常见的功能,css或jquery实现,实现方式多样化,这里http://我介绍我在项目中实现的方式,全屏遮罩,部分区域可操作,非常实用. 效果如下图:  js 实现部分: 复制代码 代码如下: <script type="text/javascript"> var myAlert = document.getElementById("alert"); var reg = document.getElementById("c

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • javascript div 遮罩层封锁整个页面

    具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

  • 纯js实现遮罩层效果原理分析

    可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原理如下: * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: 复制代码 代码如下: <html>

  • 弹出最简单的模式化遮罩层的js代码

    假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo

随机推荐