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 >


wKiom1fD52-xoHpSAAXQ4GWV1aU462.jpg