zoukankan      html  css  js  c++  java
  • 弹窗叠层

    本文标签:js,弹出窗口

    如果你还不会,可以看看下面这个简单的例子 。

    复制代码 代码如下:

    <html>
    <head>
    <title>弹出一个窗口后,后面的层不可操作</title>
    <script>
    function show()  //显示隐藏层和弹出层
    {
       var hideobj=document.getElementById("hidebg");
       hidebg.style.display="block";  //显示隐藏层
       hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
       document.getElementById("hidebox").style.display="block";  //显示弹出层
    }
    function hide()  //去除隐藏层和弹出层
    {
       document.getElementById("hidebg").style.display="none";
       document.getElementById("hidebox").style.display="none";
    }
    </script>
    <style>
       body { margin:0px;padding:0px;text-align: center;}
       #hidebg { position:absolute;left:0px;top:0px;
         
          100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
          filter:alpha(opacity=60);  /*设置透明度为60%*/
          opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
          display:none; /* http://www.jb51.net */
          z-Index:2;}
       #hidebox { position:absolute;400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
       #content { text-align:center;cursor:pointer;z-Index:1;}
    </style>
    </head>
    <body>
    <div id="hidebg"></div>
    <div id="hidebox" onClick="hide();">点击关闭</div>
    <div id="content" onClick="show();">点击试试</div>
    </body>
    </html>


     

  • 相关阅读:
    CodeForces 980 E The Number Games
    CodeForces 980 D Perfect Groups
    【动态规划】The Triangle
    【动态规划】矩形嵌套
    金块问题-排序-找最大最小
    猪八戒吃西瓜(wmelon)-排序-查找
    【贪心】取数游戏
    【贪心】排队接水
    桐桐的贸易--WA
    【贪心】智力大冲浪
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/4329923.html
Copyright © 2011-2022 走看看