ys_confirmation.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
|
.ys-confirmation{
position
:
fixed
;
left
:
0
;
right
:
0
;
top
:
0
;
bottom
:
0
;
display
:
none
;
background-color
:rgba(
0
,
0
,
0
,
0.4
);
z-index
:
99999
;
}
.ys-confirmation .ys-confirmation-content{
position
:
absolute
;
left
:
30px
;
right
:
30px
;
top
:
50%
;
display
:
block
;
background-color
:
#fff
;
margin
:
auto
;
border-radius:
8px
;
padding-bottom
:
51px
;
box-sizing: border-box;
}
.ys-confirmation .ys-confirmation-content .ys-confirmation-message{
color
:
#222
;
line-height
:
20px
;
font-size
:
14px
;
text-align
:
center
;
padding
:
25px
15px
;
}
.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group{
position
:
absolute
;
left
:
0
;
right
:
0
;
bottom
:
0
;
display
:
block
;
width
:
100%
;
height
:
51px
;
border-top
:
1px
solid
#e5e5e5
;
}
.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group a{
position
:
absolute
;
top
:
0
;
bottom
:
0
;
display
:
block
;
width
:
50%
;
height
:
50px
;
line-height
:
50px
;
text-align
:
center
;
font-size
:
17px
;
color
:
#ff7920
;
}
.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group a.ys-confirmation-cancel-btn{
left
:
0
;
}
.ys-confirmation .ys-confirmation-content .ys-confirmation-btn-group a.ys-confirmation-ok-btn{
right
:
0
;
border-left
:
1px
solid
#e5e5e5
;
font-weight
:
bold
;
}
|
ys_confirmation.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
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
|
(
function
($){
var
container =
null
;
var
currentCallback =
null
;
var
html =
"<div class='ys-confirmation'> "
+
" <div class='ys-confirmation-content'> "
+
" <div class='ys-confirmation-message'></div>"
+
" <div class='ys-confirmation-btn-group'> "
+
" <a class='ys-confirmation-cancel-btn'>取消</a> "
+
" <a class='ys-confirmation-ok-btn'>确定</a> "
+
" </div> "
+
" </div> "
+
"</div> "
;
function
render(){
container = $(html).appendTo(
"body"
);
}
function
show(message,callback){
currentCallback = callback;
$(container).find(
".ys-confirmation-message"
).html(message);
$(container).css(
"visibility"
,
"hidden"
);
$(container).show();
var
popupContentHeight = parseInt($(container).find(
".ys-confirmation-content"
).css(
"height"
));
$(container).find(
".ys-confirmation-content"
).css({
"margin-top"
:(-1)*popupContentHeight/2+
"px"
});
$(container).css(
"visibility"
,
"initial"
);
}
function
hide(){
$(container).hide();
currentCallback =
null
;
}
function
bindEvents(){
container.on(
"touchend"
,
".ys-confirmation-cancel-btn"
,
function
(e){
e.stopPropagation();
e.preventDefault();
hide();
});
container.on(
"touchend"
,
".ys-confirmation-ok-btn"
,
function
(e){
e.stopPropagation();
e.preventDefault();
currentCallback();
hide();
});
}
var
initialized =
false
;
function
init(){
if
(initialized){
return
;
}
initialized =
true
;
render();
bindEvents();
}
function
showConfirmation(message,callback){
init();
show(message,callback);
}
var
ConfirmationWidget = {};
ConfirmationWidget.showConfirmation=showConfirmation;
window.ConfirmationWidget = ConfirmationWidget;
})(jQuery);
|
component.html
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
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
>
<
link
rel
=
"stylesheet"
href
=
"static/css/common/ys_confirmation.css"
>
<
script
src
=
"static/js/vendor/jquery-2.1.3.min.js"
></
script
>
<
script
src
=
"static/js/common/ys_confirmation.js"
></
script
>
</
head
>
<
body
>
<
input
id
=
"confirm-btn"
type
=
"button"
value
=
"确认"
/>
<
script
>
$("#confirm-btn").click(function(e){
e.stopPropagation();
e.preventDefault();
ConfirmationWidget.showConfirmation("确认提交?",function(){
alert("提交");
});
});
</
script
>
</
body
>
</
html
>
|
版权声明:原创作品,如需转载,请注明出处。否则将追究法律责任
本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/1843954