javascript弹出DIV层并锁屏原理

javascript弹出DIV层并锁屏

 1 <html>
 2 <head>
 3     <title>javascript弹出DIV层并锁屏</title>
 4     <style>
 5         .black_overlay
 6         {
 7             display: none;
 8             position: absolute;
 9             top: 0%;
10             left: 0%;
11             width: 100%;
12             height: 100%;
13             background-color: black;
14             z-index: 1001;
15             -moz-opacity: 0.8;
16             opacity: 0.5;
17             filter: alpha(opacity=80);
18         }
19         
20         .white_content
21         {
22             display: none;
23             position: absolute;
24             top: 25%;
25             left: 25%;
26             width: 50%;
27             height: 50%;
28             padding: 16px;
29             border: 16px solid orange;
30             background-color: white;
31             z-index: 1002;
32             overflow: auto;
33         }
34     </style>
35 </head>
36 <body>
37     <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">打开</a>
38     <div id="light" class="white_content">内容<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a></div>
39     <div id="fade" class="black_overlay">
40     </div>
41 </body>
42 </html>

思路：

  2个div 默认隐藏 点击的时候 显示，其中一个div利用css效果(width：100% height：100% 结合z_index 注意内容的z_index的值大于背后隐藏的idv的z_index

   关闭 则隐藏)。

jq版本

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>半透明背景层</title>
    <script src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var station = false,
                info = $(".info"),
                backgroundDiv = $(".backgroundDiv");
            $("#show").click(function () {
                if (station == false) {
                    backgroundDiv.css({ "opacity": "0.5" }).fadeIn('normal');
                    var scrollWidth = document.documentElement.clientWidth,
                        scrollHeight = document.documentElement.clientHeight,
                        divWidth = info.width(),
                        divHeight = info.height(),
                        divLeft = scrollWidth / 2 - divWidth / 2,
                        divTop = scrollHeight / 2 - divHeight / 2;
                    info.css({ "position": "absolute", "top": divTop, "left": divLeft }).fadeIn('normal');
                    station = true;
                } else {
                    alert("状态错误！");
                }
            });

            $("#close").click(function () {
                if (station == true) {
                    info.fadeOut('normal');
                    backgroundDiv.fadeOut('normal');
                    station = false;
                }
            });
        });
    </script>
    <style type="text/css">
        .backgroundDiv
        {
            width: 100%;
            height: 100%;
            display: none;
            z-index: 10;
            background-color: #333333;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .info
        {
            width: 400px;
            height: 300px;
            background-color: #FFFFFF;
            border: 5px solid #0066FF;
            display: none;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 11;
        }
        #closeDiv
        {
            float: right;
            width: 22px;
            height: 22px;
            margin-top: 10px;
            margin-right: 10px;
        }
        .close
        {
            float: right;
        }
    </style>
</head>
<body>
    <center>
        <img src="images/opacity.jpg" />
        <div><button id="show">press me</button>
        </div>
    </center>
    <div class="backgroundDiv"></div>
    <div class="info">
        <div id="closeDiv"><img id="close" src="images/close.jpg" width="22" /></div>
        <img src="images/opacity.jpg" width="400px" />
    </div>
</body>
</html>

原理同上。 jq代码 首先获取body的width 和height ，在获取弹出框的width 和height 用body的值减去弹出框的值 除2 就居中了。至于鼠标移动注意鼠标的事件顺序

首先 onmousedown(鼠标按下) onmousemove（鼠标拖动） onmouseup（鼠标松开） 最后控制移动的范围 总不能移动到屏幕的外面去吧 ！呵呵

posted @ 2013-03-26 10:09  s_p  阅读(833)  评论(0)  编辑  收藏  举报