[javascript] view plain copy
1. </pre><pre name="code" class="html">/* 
2. * Zepto 1.1.4 
3. * 
4. * wangxianfa 
5. * 
6. * 2015-07-03 
7. * 
8. * */  
9. (function ($) {  
10.     function Popup(option) {  
11.   
12.         this.option = $.extend({  
13.             target: $('<div></div>'),  
14.             isFixed: true,  
15.             isMask: true,  
16.             maskClick: false  
17.         }, option || {});  
18.   
19.     }  
20.   
21.     Popup.prototype = {  
22.   
23.         dom: function () {  
24.             return this.option.target;  
25.         },  
26.   
27.         show: function (fn) {  
28.             var ml,  
29.                 mt;  
30.   
31.             if (this.option.isMask) {  
32.                 this.option.mask  
33.                     .show()  
34.                     .css({  
35.                         opacity: '.5'  
36.                     });  
37.             }  
38.   
39.             this.option.target.show();  
40.   
41.             ml = -this.option.target.width() / 2;  
42.             mt = -this.option.target.height() / 2;  
43.   
44.             if (this.option.isFixed) {  
45.                 this.option.target.css('position', 'fixed');  
46.             } else {  
47.                 mt += document.getElementsByTagName('body')[0].scrollTop;  
48.   
49.             }  
50.             this.option.target.css({  
51.                 marginLeft: ml,  
52.                 marginTop: mt  
53.             });  
54.   
55.             if (typeof fn === 'function') {  
56.                 fn();  
57.             }  
58.         },  
59.   
60.         hide: function (fn) {  
61.   
62.             this.option.target.hide();  
63.             this.option.mask.hide();  
64.   
65.             if (typeof fn === 'function') {  
66.                 fn();  
67.             }  
68.         },  
69.         basic: function () {  
70.   
71.             var self = this,  
72.                 body = $('body');  
73.   
74.             this.option.target  
75.                 .hide()  
76.                 .css({  
77.                     left: '50%',  
78.                     top: '50%',  
79.                     zIndex: 999  
80.                 });  
81.   
82.             body.append(this.option.target);  
83.   
84.             if (this.option.isMask) {  
85.                 self.option.mask = $('<div></div>');  
86.                 self.option.mask  
87.                     .hide()  
88.                     .addClass('popupMask')  
89.                     .css({  
90.                         left: 0,  
91.                         top: 0,  
92.                         width: '100%',  
93.                         height: '100%',  
94.                         backgroundColor: '#000',  
95.                         zIndex: 998,  
96.                         position: 'fixed'  
97.                     });  
98.                 body.append(self.option.mask);  
99.             }  
100.   
101.             this.dom().find('*').each(function () {  
102.                 if ($(this).attr('data-lightbox') === 'close') {  
103.                     $(this).bind('click', function () {  
104.                         self.hide();  
105.                     })  
106.                 }  
107.             });  
108.   
109.             if (self.option.maskClick) {  
110.                 self.option.mask.on('click', function () {  
111.                     self.hide();  
112.                 });  
113.             }  
114.         }  
115.     };  
116.   
117.     window.Popup = Popup;  
118.   
119. })(Zepto);  
 
 
实例化
[html] view plain copy
1. var lightBox = function (){   
2.         var lightbox = new Popup({  
3.             target: $('.weixin').clone(),  
4.             isMask: true,  
5.             isFixed: true,  
6.             maskClick: true  
7.         });  
8.         lightbox.basic();  
9.   
10.         return {  
11.             show: function(callback) {  
12.                 lightbox.show(callback);  
13.             },  
14.             hide: function(callback) {  
15.                 lightbox.hide(callback);  
16.             },  
17.             dom: function(){  
18.                 return lightbox.dom();  
19.             }  
20.         }  
21.     }();

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！