某些时候我们需要使用到模态窗口,而各个浏览器对模态窗口的支持有些不同(万恶的浏览器兼容问题)。所以我们需要自己制作模态窗口。

方法一:使用html/css/jquery制作

HTML
1
2
3
4
5
6
7
8
9
10
11
12
<p class="showbtn"><a href="javascript:void(0);">显示遮罩层</a></p>
<div id="bg"></div>
<div class="box" style="display: none">
<h2>标题<a href="#" class="close">关闭</a></h2>
<div class="list">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
CSS
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
55
.box {
position: absolute;
width: 600px;
left: 50%;
height: auto;
z-index: 100;
background-color: #fff;
border: 1px #ddd solid;
padding: 1px;
}
.box h2 {
height: 25px;
font-size: 14px;
background-color: #aaa;
position: relative;
padding-left: 10px;
line-height: 25px;
color: #fff;
}
.box h2 a {
position: absolute;
right: 5px;
font-size: 12px;
color: #fff;
}
.box .list {
padding: 10px;
}
.box .list li {
height: 24px;
line-height: 24px;
}
.box .list li span {
margin: 0 5px 0 0;
font-family: "宋体";
font-size: 12px;
font-weight: 400;
color: #ddd;
}
.showbtn {
font: bold 24px '微软雅黑';
}
#bg {
background-color: #666;
position: absolute;
z-index: 99;
left: 0;
top: 0;
display: none;
width: 100%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
Jquery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function () {
$(".showbtn").click(function () {
$("#bg").css({
display: "block", height: $(document).height()
});
var $box = $('.box');
$box.css({
//设置弹出层距离左边的位置
left:($("body").width() - $box.width()) / 2 - 20 + "px",
//设置弹出层距离上面的位置
top:($(window).height() - $box.height()) / 2 + $(window).scrollTop() + "px",
display: "block"
});
});
//点击关闭按钮的时候,遮罩层关闭
$(".close").click(function () {
$("#bg,.box").css("display", "none");
});
});

方法二:仅使用jquery制作

Jquery
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function createTable() {
var msgw = $("#modal").width;//提示窗口的宽度
var msgh = $("#modal").height; //根据内容确定高度
//遮罩层
var bgObj = $("<div id='bgDiv'></div>");
bgObj.css({
"position" : "absolute",
"top" : "0",
"background" : "#777",
"filter" : "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)",
"opacity" : "0.6",
"left" : "0",
"width" : document.body.offsetWidth + "px",
"height" : screen.height + "px",
"zIndex" : "10000"
});
//弹窗层
var msgObj = $("<div id='msgDiv'></div>")
msgObj.css({
"align" : "center",
"background" : "white",
"position" : "absolute",
"left" : "50%",
"top" : "30%",
"font" : "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif",
"marginLeft" : "-225px",
"marginTop" : -75 + document.documentElement.scrollTop + "px",
"width" : msgw + "px",
"height" : msgh + "px",
"textAlign" : "center",
"lineHeight" : "25px",
"zIndex" : 10001
});
//弹窗的标题栏
var title = $("<h4 id='msgTitle'><a> X </a></h4>");
title.css({
"align": "right",
"text-align" : "right",
"margin" : "0px 0px 0px 0px",
"padding" : "0px 5px 3px 0px",
"background": "#87cefa",
"filter" : "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);",
"opacity" : "0.75",
"height" : "18px",
"font" : "12px Verdana, Geneva, Arial, Helvetica, sans-serif",
"color": "white",
});
title.find("a").css({
"cursor" : "pointer",
"background-color": "#dc143c",
"font-weight" : "bold",
"border-radius" : "0px 0px 3px 3px"
});
//弹窗内容
var txt = $("<p id='msgTxt' style='padding:0px 0px 0px 0px;'></p>");
txt.css({
"margin" : "0px 0px 0px 0px"
});
$(txt).append($("#modal").html());
//添加元素到页面
$("body").append(bgObj);
$("body").append(msgObj);
msgObj.append(title);
msgObj.append(txt);
//弹窗内容操作
(function (ct) {
$(ct).find("td:not([selected])",ct).click(function () {
if (!ct.firstTD) {
ct.firstTD = this;
ct.firstIndex = parseInt($(this).attr("index"));
}
else {
ct.firstTD = null;
}
return false;
}).mouseover(function () {
if (ct.firstTD) {
$("td:not([selected])", ct).css("background", "#fff");
var firstIndex = ct.firstIndex;
var index = parseInt($(this).attr("index"));
for (var i = firstIndex; i <= index; i++) {
var curTD = $("td[index=" + i + "]",ct);
if (curTD.attr("selected")) {
break;
}
$("td[index=" + i + "]",ct).css("background", "red");
}
}
}).mouseout(function () {
if (ct.firstTD) {
$("td:not([selected])", ct).css("background", "#fff");
var firstIndex = ct.firstIndex;
var index = parseInt($(this).attr("index"));
for (var i = firstIndex; i <= index; i++) {
var curTD = $("td[index=" + i + "]",ct);
if (curTD.attr("selected")) {
break;
}
$("td[index=" + i + "]",ct).css("background", "red");
}
}
});
})(txt);
//绑定触发事件
(function (tt) {
$(tt).click(function () {
$("body").find(bgObj).remove();
msgObj.find(title).remove();
msgObj.find(txt).remove();
$("body").find(msgObj).remove();
});
})(title);
}