分享程序员开发的那些事...
更新时间：2022-09-24 20:18:36
51CTO把我以前粘贴的代码弄掉了一些，让我自己拿回来用时居然不能用，现在重新粘贴上去。（2013-06-27）
下面的代码，可复制粘贴直接运行测试。
1、js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/*本脚本文件须结合jquery使用*/ function showModalDiv() {
var sWidth, sHeight;
sWidth = $(window).width();
sHeight = $(document).height();
//背景层（大小与窗口有效区域相同，即当弹出对话框时，背景显示为放射状透明灰色）
var bgObj = document.createElement("div"); //创建一个div对象（背景层）
//定义div属性，即相当于
// <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>
bgObj.setAttribute("id", "bgDiv");
bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#777";
bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity = "0.6";
bgObj.style.left = "0";
bgObj.style.width = sWidth + "px";
bgObj.style.height = sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj); //在body内添加该div对象
document.getElementById("divModal").style.display = "block"; //显示"模态"DIV
$("#closeLogin").mouseover(function() {
this.style.fontWeight = "bold";
});
$("#closeLogin").mouseleave(function() {
this.style.fontWeight = "normal";
});
document.getElementById("closeLogin").onclick = function removeObj() {
document.getElementById("divModal").style.display = "none"; //隐藏"模态"DIV
document.body.removeChild(bgObj); //删除背景层Div
}
}var i = 100;
function scall() {
var divModal = document.getElementById("divModal");
var w_width = $(window).width();
var w_heitht = $(window).height();
var div_width = divModal.style.width;
var div_height = divModal.style.height;
var i_width = parseInt(div_width.substr(0, div_width.length - 2)); //div的宽度
var i_height = parseInt(div_height.substr(0, div_height.length - 2)); //div的高度
divModal.style.left = (w_width / 2 - i_width / 2) + "px";
divModal.style.top = (w_heitht / 2 - i_height * 0.6) + "px";
}window.onscroll = scall; //屏幕滚动事件
window.onresize = scall; //屏幕大小改变事件
window.onload = scall; //加载屏幕
|
2、测试页面，先引入jquery，再引入上面的脚本。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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' />
<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>
|
上面6、7行中的src地址被51CTO转换了，应酌情处理。第10行的onclick="showModalDiv();"被干掉，我是愤怒！
3、截图。
*** Updated 2013-06-27 ***
