zoukankan      html  css  js  c++  java
  • 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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    4. 归并排序
    3. 堆排序
    2. 希尔排序
    1. 选择排序、插入排序、冒泡排序
    1. 拓扑排序
    8. 最大堆
    7. B+树
    6. B树
    5. 二叉查找树、平衡二叉树、红黑树的效率比较
    4. 红黑二叉树
  • 原文地址:https://www.cnblogs.com/dongyu9521/p/3622938.html
Copyright © 2011-2022 走看看