zoukankan      html  css  js  c++  java
  • js弹出新的界面对话框

    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";
                };
    <style>
       body { margin:0px;padding:0px;text-align: center;}
       #hidebg { position:absolute;left:0px;top:0px;
          background-color:#000;
          width:100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
          filter:alpha(opacity=60);  /*设置透明度为60%*/
          opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
          display:none; /* http://www.jb51.net */
          z-Index:2;}
       #hidebox { position:absolute;width: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>
           <div id="hidebg"></div>
                <div id="hidebox" onClick="hide();">点击关闭</div>
                <div id="content" onClick="show();">点击试试</div>
  • 相关阅读:
    hdu5514 非2的次幂容斥原理
    「NOIP2015」斗地主
    「NOIP2009」靶形数独
    「CF521D」Shop
    「HNOI2015」菜肴制作
    「NOIP2011」观光公交
    「NOI2015」荷马史诗
    「JSOI2007」建筑抢修
    「CF161B」Discounts
    叠罗汉
  • 原文地址:https://www.cnblogs.com/erph/p/7357563.html
Copyright © 2011-2022 走看看