如今绝大多数网站都不用自带的alert和confirm了，由于界面太生硬了。所以这个插件就这样产生了...javascript
来看插件的实现代码吧：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
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
|
(
function
() {
$.MsgBox = {
Alert:
function
(title, msg) {
GenerateHtml(
"alert"
, title, msg);
btnOk();
//alert只是弹出消息，所以不必用到回调函数callback
btnNo();
},
Confirm:
function
(title, msg, callback) {
GenerateHtml(
"confirm"
, title, msg);
btnOk(callback);
btnNo();
}
}
//生成Html
var
GenerateHtml =
function
(type, title, msg) {
var
_html =
""
;
_html +=
'<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">'
+ title +
'</span>'
;
_html +=
'<a id="mb_ico">x</a><div id="mb_msg">'
+ msg +
'</div><div id="mb_btnbox">'
;
if
(type ==
"alert"
) {
_html +=
'<input id="mb_btn_ok" type="button" value="肯定" />'
;
}
if
(type ==
"confirm"
) {
_html +=
'<input id="mb_btn_ok" type="button" value="肯定" />'
;
_html +=
'<input id="mb_btn_no" type="button" value="取消" />'
;
}
_html +=
'</div></div>'
;
//必须先将_html添加到body，再设置Css样式
$(
"body"
).append(_html); GenerateCss();
}
//生成Css
var
GenerateCss =
function
() {
$(
"#mb_box"
).css({ width:
'100%'
, height:
'100%'
, zIndex:
'99999'
, position:
'fixed'
,
filter:
'Alpha(opacity=60)'
, backgroundColor:
'black'
, top:
'0'
, left:
'0'
, opacity:
'0.6'
});
$(
"#mb_con"
).css({ zIndex:
'999999'
, width:
'400px'
, position:
'fixed'
,
backgroundColor:
'White'
, borderRadius:
'15px'
});
$(
"#mb_tit"
).css({ display:
'block'
, fontSize:
'14px'
, color:
'#444'
, padding:
'10px 15px'
,
backgroundColor:
'#DDD'
, borderRadius:
'15px 15px 0 0'
,
borderBottom:
'3px solid #009BFE'
, fontWeight:
'bold'
});
$(
"#mb_msg"
).css({ padding:
'20px'
, lineHeight:
'20px'
,
borderBottom:
'1px dashed #DDD'
, fontSize:
'13px'
});
$(
"#mb_ico"
).css({ display:
'block'
, position:
'absolute'
, right:
'10px'
, top:
'9px'
,
border:
'1px solid Gray'
, width:
'18px'
, height:
'18px'
, textAlign:
'center'
,
lineHeight:
'16px'
, cursor:
'pointer'
, borderRadius:
'12px'
, fontFamily:
'微软雅黑'
});
$(
"#mb_btnbox"
).css({ margin:
'15px 0 10px 0'
, textAlign:
'center'
});
$(
"#mb_btn_ok,#mb_btn_no"
).css({ width:
'85px'
, height:
'30px'
, color:
'white'
, border:
'none'
});
$(
"#mb_btn_ok"
).css({ backgroundColor:
'#168bbb'
});
$(
"#mb_btn_no"
).css({ backgroundColor:
'gray'
, marginLeft:
'20px'
});
//右上角关闭按钮hover样式
$(
"#mb_ico"
).hover(
function
() {
$(
this
).css({ backgroundColor:
'Red'
, color:
'White'
});
},
function
() {
$(
this
).css({ backgroundColor:
'#DDD'
, color:
'black'
});
});
var
_widht = document.documentElement.clientWidth;
//屏幕宽
var
_height = document.documentElement.clientHeight;
//屏幕高
var
boxWidth = $(
"#mb_con"
).width();
var
boxHeight = $(
"#mb_con"
).height();
//让提示框居中
$(
"#mb_con"
).css({ top: (_height - boxHeight) / 2 +
"px"
, left: (_widht - boxWidth) / 2 +
"px"
});
}
//肯定按钮事件
var
btnOk =
function
(callback) {
$(
"#mb_btn_ok"
).click(
function
() {
$(
"#mb_box,#mb_con"
).remove();
if
(
typeof
(callback) ==
'function'
) {
callback();
}
});
}
//取消按钮事件
var
btnNo =
function
() {
$(
"#mb_btn_no,#mb_ico"
).click(
function
() {
$(
"#mb_box,#mb_con"
).remove();
});
}
})();
|
Html代码结构以下，js里面拼接的不直观，给出以下：html
|
1
2
3
4
5
6
7
8
9
|
<
div
id
=
"mb_box"
></
div
>
<
div
id
=
"mb_con"
>
<
span
id
=
"mb_tit"
>title</
span
><
a
id
=
"mb_ico"
>x</
a
>
<
div
id
=
"mb_msg"
>msg</
div
>
<
div
id
=
"mb_btnbox"
>
<
input
id
=
"mb_btn_ok"
type
=
"button"
value
=
"肯定"
/>
<
input
id
=
"mb_btn_no"
type
=
"button"
value
=
"取消"
/>
</
div
>
</
div
>
|
mb_box为半透明遮罩层，将整个页面遮住，禁止操做；mb_con为提示框。之因此没把mb_con放在mb_box里面，是由于若是放里面的话，对mb_box设置的透明度会影响到mb_con，使mb_con也会变成透明的。以前也试过background-color:rgba()，惋惜ie8及如下版本不支持。因此仍是把mb_con拿到外面来了，经过设置z-index使其mb_box的上面。java
为了使插件使用方便，特地的没有用到图片，全是经过css来控制界面效果，使用时，引用一个js文件就能够了。css样式在js中写死了，这点可能不太灵活，但使用却很方便若是你对界面样式不满意或者与你网站的色彩风格不一致，那只能自行修改了。jquery
因为弹出层（div）没法作到像原始的alert和confirm那样作到页面阻塞效果，所以只能经过 回调函数 来进行模拟。也由于这个缘由，后台数据操做只能经过回调函数配合ajax来完成的。ajax
Demo以下：app
|
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
|
<
head
>
<
title
>模拟alert和confirm提示框</
title
>
</
head
>
<
body
>
<
input
id
=
"add"
type
=
"button"
value
=
"添加"
/>
<
input
id
=
"delete"
type
=
"button"
value
=
"删除"
/>
<
input
id
=
"update"
type
=
"button"
value
=
"修改"
/>
<
script
src
=
"../js/jquery-1.4.1.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"../js/jquery.similar.msgbox.js"
type
=
"text/javascript"
></
script
>
<
script
type
=
"text/javascript"
>
$("#add").bind("click", function () {
$.MsgBox.Alert("消息", "哈哈，添加成功！");
});
//回调函数能够直接写方法function(){}
$("#delete").bind("click", function () {
$.MsgBox.Confirm("舒适提示", "执行删除后将没法恢复，肯定继续吗？舒适提示", function () { alert("你竟然真的删除了..."); });
});
function test() {
alert("你点击了肯定,进行了修改");
}
//也能够传方法名 test
$("#update").bind("click", function () {
$.MsgBox.Confirm("舒适提示", "肯定要进行修改吗？", test);
});
//固然你也能够不给回调函数,点击肯定后什么也不作，只是关闭弹出层
//$("#update").bind("click", function () { $.MsgBox.Confirm("舒适提示", "肯定要进行修改吗？"); });
</
script
>
</
body
>
</
html
>
|
代码量并很少，若有什么疑问能够留言 :)函数