一个简单的页面弹窗插件 jquery.pageMsgFrame.js

 1 doctype html>
 2 html>
 3 head>
 4 meta charset="utf-8" />
 5 title>jQuery.pageMsgFrametitle>
 6 script src="jquery-1.7.2.min.js">script>
 7 script src="jQuery.pageMsgFrame.js">script>
 8 head>
 9 style>
10 *{ margin: 0;padding: 0;}
11 .msg { height: 180px; width: 400px; position: absolute; top: 240px; left: 50%; margin-left: -200px; background: #f00; color: #fff; z-index: 3;}
12 a{ color: #fff;}
13 button { margin: 10px;}
14 style>
15 body>
16 button id="show">showbutton>
17 button id="fade">fadebutton>
18 button id="slideDown">slideDownbutton>
19 
20 
21 div class="msg" style="display:none;">
22     p align="right">a class="close" href="javascript:void(0);">关闭a>p>
23     p class=‘content‘>内容p>
24     p>a class="submit" href="javascript:void(0);">确定a> a class="close" href="javascript:void(0);">取消a>p>
25 div>
26 
27 script>
28 $(function(){
29     $(window).pageMsgFrame({objFrame:‘.msg‘,showBtn:‘#show‘,closeBtn:‘.close‘,effect:‘normal‘,timer:400});
30     $(window).pageMsgFrame({objFrame:‘.msg‘,showBtn:‘#fade‘,closeBtn:‘.close‘,effect:‘fade‘,timer:600});
31     $(window).pageMsgFrame({objFrame:‘.msg‘,showBtn:‘#slideDown‘,closeBtn:‘.close‘,effect:‘slide‘,timer:400});
32 })
33 
34 script>
35 body>
36 html>

 1 /*
 2  * jQuery.pageMsgFrame.js
 3  * v.1.0
 4  * 2014-05-12 
 5  * derek sun
 6  */
 7 (function($){
 8 
 9     $.fn.pageMsgFrame = function(option){
10         //默认参数列表
11         var settings = {
12             showBtn:‘‘,
13             closeBtn:‘‘,
14             submitBtn:‘‘,
15             objFrame:‘‘,
16             effect:‘‘,
17             //effect包含 normal fade slide
18 
19             _before:function(){
20                 $.noop();
21             },
22             _after:function(){
23                 $.noop();
24             },
25             _submit:function(){
26                 $.noop();
27             },
28             _ajax:function(){
29                 $.noop();
30             },
31             timer:0
32         };
33 
34         var opts = $.extend(settings,option,{});
35 
36         //show
37         $(opts.showBtn).live(‘click‘,function(){
38             opts._before();
39             showPageFrameLayer();
40             showFrame();
41         })
42         
43         //hide
44         $(opts.closeBtn).live(‘click‘,function(){
45             $(opts.objFrame).add(‘.pageFrameLayer‘).fadeOut();
46             $(".pageFrameLayer").remove();
47             opts._after();
48         })
49 
50         //_ajax
51         $(opts.submitBtn).live(‘click‘,function(){
52             opts._ajax();
53         })
54 
55         function showFrame(){
56             switch(opts.effect){
57                 case ‘normal‘:
58                     opts.timer?$(opts.objFrame).show(opts.timer):$(opts.objFrame).show();
59                 break;
60 
61                 case ‘fade‘:
62                     opts.timer?$(opts.objFrame).fadeIn(opts.timer):$(opts.objFrame).fadeIn();
63                 break;
64 
65                 case ‘slide‘:
66                     opts.timer?$(opts.objFrame).slideDown(opts.timer):$(opts.objFrame).slideDown();
67                 break;
68 
69                 default:
70                     $(opts.objFrame).show();
71                 break;
72             }
73         }
74 
75         function showPageFrameLayer(){
76             if(!$(".pageFrameLayer").length){
77                 $("body").append(‘
‘);
78             }
79         }
80 
81     }
82 
83 })(jQuery)