首页 > Web开发 > 详细

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

时间:2014-03-25 18:58:22      阅读:609      评论:0      收藏:0      [点我收藏+]

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

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

    #divBg

          {

             z-index: 99;

             position: absolute;

             width: 100%;

             height: 100%;

             background: #000;

              -moz-opacity: 0.5;

              opacity: 0.5;

              filter: alpha(opacity=20);

           }

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

  #divAdd

         {

             width: 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";

        }

CSS实现覆盖弹窗(效果如JQuery-UI的Dialog),布布扣,bubuko.com

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

原文:http://www.cnblogs.com/dongyu9521/p/3622938.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!