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
>