“模态”DIV对话框

由http://walkerqt.blog.51cto.com/1310630/869587迁移。

下面的代码，可复制粘贴直接运行测试。

1、js代码。（ModalDIV.js）

 1 /*本脚本文件须结合jquery使用*/
 2                                                                               
 3 function showModalDiv() {
 4     var sWidth, sHeight;
 5     sWidth = $(window).width();
 6     sHeight = $(document).height();
 7                                                                               
 8                                                                               
 9     //背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
10     var bgObj = document.createElement("div"); //创建一个div对象（背景层）
11                                                                               
12     //定义div属性，即相当于
13     // <div   id="bgDiv"   style="position:absolute;   top:0;   background-color:#777;   filter:progid:DXImagesTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);   opacity:0.6;   left:0;   width:918px;   height:768px;   z-index:10000;"> </div>
14     bgObj.setAttribute("id", "bgDiv");
15     bgObj.style.position = "absolute";
16     bgObj.style.top = "0";
17     bgObj.style.background = "#777";
18     bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
19     bgObj.style.opacity = "0.6";
20     bgObj.style.left = "0";
21     bgObj.style.width = sWidth + "px";
22     bgObj.style.height = sHeight + "px";
23     bgObj.style.zIndex = "10000";
24     document.body.appendChild(bgObj); //在body内添加该div对象
25                                                                               
26     document.getElementById("divModal").style.display = "block"; //显示"模态"DIV
27                                                                               
28     $("#closeLogin").mouseover(function() {
29         this.style.fontWeight = "bold";
30     });
31     $("#closeLogin").mouseleave(function() {
32         this.style.fontWeight = "normal";
33     });
34     document.getElementById("closeLogin").onclick = function removeObj() {
35         document.getElementById("divModal").style.display = "none"; //隐藏"模态"DIV
36         document.body.removeChild(bgObj); //删除背景层Div
37     }
38 }
39 var i = 100;
40                                                                               
41 function scall() {
42     var divModal = document.getElementById("divModal");
43     var w_width = $(window).width();
44     var w_heitht = $(window).height();
45     var div_width = divModal.style.width;
46     var div_height = divModal.style.height;
47     var i_width = parseInt(div_width.substr(0, div_width.length - 2));      //div的宽度
48     var i_height = parseInt(div_height.substr(0, div_height.length - 2));   //div的高度
49     divModal.style.left = (w_width / 2 - i_width / 2) + "px";
50     divModal.style.top = (w_heitht / 2 - i_height * 0.6) + "px";
51 }
52 window.onscroll = scall;    //屏幕滚动事件
53 window.onresize = scall;    //屏幕大小改变事件
54 window.onload = scall;      //加载屏幕

ModalDiv.js

2、测试页面，先引入jquery，再引入上面的脚本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="js/ModalDIV.js" type="text/javascript"></script>
</head>
<body>
    <input id="Button1" type="button" value='弹出"模态"DIV' onclick="showModalDiv();" />
    <div id="divModal" style="display: none; position: fixed; background-color:#BDE747;
        border-color: Black; border-style: solid; border-width: thin; width: 200px; height: 200px;
        float: left; z-index: 10001;">
        <div style="height: 25px; background-color:Green;">
                <span id="closeLogin" style="margin: 3px; float: right; cursor: pointer; font-size: large;">
                    关闭
            </span>
        </div>
        <center><h2>HelloWorld!</h2></center>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <center>到底啦！</center>
</body>
</html>

3、截图。

***

posted on 2013-06-27 16:50 walkerqt 阅读(200) 评论(0) 收藏举报