• CSS实现覆盖弹窗(效果如JQuery-UI的Dialog)


    原理:定义一个新的div用来覆盖整个页面,再把想要弹出的窗口放在这个div上面

    1、定义一个div,设置其隐藏(display:none),用于覆盖整个页面,并设置其CSS属性为:

        #divBg

              {

                 z-index: 99;

                 position: absolute;

                  100%;

                 height: 100%;

                 background: #000;

                  -moz-opacity: 0.5;

                  opacity: 0.5;

                  filter: alpha(opacity=20);

               }

    2、设置要弹出的div的CSS属性为:

      #divAdd

             {

                  300px;

                 height: 348px;

                 position: absolute;

                 background: #D6DFF7;

                 top: 100px;

                 left: 450px;

                 z-index: 100;

             }

    3、弹出窗口的事件:

      function ShowAdd() {

                if (document.getElementById("divAdd").style.display == "block") {

                }

                document.getElementById("divAdd").style.position = "absolute";

                document.getElementById("divAdd").style.display = "block";

                document.getElementById("divBg").style.display = "block";

            }

    4、关闭窗口的事件:

      function CancelAdd() {

                document.getElementById("divAdd").style.display = "none";

                document.getElementById("divBg").style.display = "none";

            }

    作者:七步、 出处:http://www.cnblogs.com/dongyu9521/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    JSTL 配置
    HTML5 移动端web
    PHP 和 AJAX MySQL
    js php 互调
    google F12
    Codechef TRIPS Children Trips (分块、倍增)
    BZOJ 1859 Luogu P2589 [ZJOI2006]碗的叠放 (计算几何)
    AtCoder AGC002E Candy Piles (博弈论)
    BZOJ 2716 [Violet 3]天使玩偶 (CDQ分治、树状数组)
    AtCoder AGC001F Wide Swap (线段树、拓扑排序)
  • 原文地址:https://www.cnblogs.com/dongyu9521/p/3622938.html
Copyright © 2020-2023  润新知