ys_popup.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ys-popup{
     position : fixed ;
     top : 0 ;
     bottom : 0 ;
     left : 0 ;
     right : 0 ;
     display : none ;
     z-index :  99999 ;
     background-color : rgba( 0 , 0 , 0 , 0.4 );
}
 
.ys-popup .ys-popup-content{
     position : absolute ;
     left : 30px ;
     right : 30px ;
     top : 50% ;
     display : block ;
     background-color : #fff ;
     margin : auto ;
     border-radius:  4px ;
}

ys_popup.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
( function ($){
 
     function  closePopup(target){
         $(target).hide();
     }
 
     function  showPopup(target){
         $(target).show();
         $(target).css( "visibility" , "hidden" );
 
         var  popupContentHeight = parseInt($(target).find( ".ys-popup-content" ).css( "height" ));
         $(target).find( ".ys-popup-content" ).css({
             "margin-top" :(-1)*popupContentHeight/2+ "px"
         });
         $(target).css( "visibility" , "initial" );
     }
 
     $( "body" ).on( "click" , ".ys-popup" , function (e){
         e.stopPropagation();
         e.preventDefault();
         $( this ).hide();
     });
 
     $( "body" ).on( "click" , ".ys-popup .ys-popup-content" , function (e){
         e.stopPropagation();
         e.preventDefault();
     });
 
 
     var  options = {
         ysPopup: function (command) {
             if (command== "show" ){
                 showPopup( this );
             } else  if (command== "hide" ){
                 closePopup( this );
             } else {
                 showPopup( this );
             }
         }
     };
     $.fn.extend(options);
})(jQuery);


测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     < div  class = "ys-popup remark-popup"  >
         < div  class = "ys-popup-content" >
             < div  class = "remark-popup-title" >备注</ div >
             < div  class = "remark-popup-content" >< textarea  placeholder = "请输入备注" ></ textarea ></ div >
             < div  class = "remark-popup-btn-group clearfix" >
                 < a  class = "remark-popup-cancel" >取消</ a >
                 < a  class = "remark-popup-ok" >确认</ a >
             </ div >
         </ div >
     </ div > <!-- activity-success-popup -->
     
     < script >
         $(".ys-popup").ysPopup("show");// 显示弹出框
         $(".ys-popup").ysPopup("hide");// 隐藏弹出框
     </ script >