原理是使用bootstrap的Modal插件实现。
一、在前端模板合适的地方,加入Modal展现div元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!-- system modal start -->
<
div
id
=
"ycf-alert"
class
=
"modal"
>
<
div
class
=
"modal-dialog modal-sm"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
><
span
aria-hidden
=
"true"
>×</
span
><
span
class
=
"sr-only"
>Close</
span
></
button
>
<
h5
class
=
"modal-title"
><
i
class
=
"fa fa-exclamation-circle"
></
i
> [Title]</
h5
>
</
div
>
<
div
class
=
"modal-body small"
>
<
p
>[Message]</
p
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-primary ok"
data-dismiss
=
"modal"
>[BtnOk]</
button
>
<
button
type
=
"button"
class
=
"btn btn-default cancel"
data-dismiss
=
"modal"
>[BtnCancel]</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- system modal end -->
|
二、在前端模板的公共模块,找合适的地方引入bootstrap
1
2
3
4
|
<
link
rel
=
"stylesheet"
href
=
"__TPL__/css/photoswipe.css"
>
<
script
type
=
"text/javascript"
src
=
"__PUBLIC__/js/jquery.min.js"
></
script
>
<
script
src
=
"__PUBLIC__/bootstrap/js/bootstrap.min.js"
></
script
>
|
三、在JS的comon层,加入重写语句。
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
|
//封装alert、confirm
window.Modal =
function
() {
var
reg =
new
RegExp(
"\\[([^\\[\\]]*?)\\]"
,
'igm'
);
var
alr = $(
"#ycf-alert"
);
var
ahtml = alr.html();
var
_alert =
function
(options) {
alr.html(ahtml);
// 复原
alr.find(
'.ok'
).removeClass(
'btn-success'
).addClass(
'btn-primary'
);
alr.find(
'.cancel'
).hide();
_dialog(options);
return
{
on:
function
(callback) {
if
(callback && callback
instanceof
Function) {
alr.find(
'.ok'
).click(
function
() { callback(
true
) });
}
}
};
};
var
_confirm =
function
(options) {
alr.html(ahtml);
// 复原
alr.find(
'.ok'
).removeClass(
'btn-primary'
).addClass(
'btn-success'
);
alr.find(
'.cancel'
).show();
_dialog(options);
return
{
on:
function
(callback) {
if
(callback && callback
instanceof
Function) {
alr.find(
'.ok'
).click(
function
() { callback(
true
) });
alr.find(
'.cancel'
).click(
function
() { callback(
false
) });
}
}
};
};
var
_dialog =
function
(options) {
var
ops = {
msg:
"提示内容"
,
title:
"操作提示"
,
btnok:
"确定"
,
btncl:
"取消"
};
$.extend(ops, options);
//
console.log(alr);
var
html = alr.html().replace(reg,
function
(node, key) {
return
{
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop:
'static'
});
}
return
{
alert: _alert,
confirm: _confirm
}
}();
|
四、在需要的地方调用。
1
2
3
4
5
6
7
8
|
Modal.confirm(
{
msg:
"商品已成功加入购物车\n是否去购物车查看?"
})
.on(
function
(e) {
if
(e)
location.href = cart_url;
});
|