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

页面弹窗是网站中常用的交互效果，它可以强提示网站的某些信息给用户，或者作用于某些信息的修改等等功能。

这几天在做一个项目的时候，就顺捎把这个插件写一下，栽棵树，自己乘凉吧。

原创博文，转载请注明出处：http://www.cnblogs.com/dereksunok/p/3724764.html

html代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>jQuery.pageMsgFrame</title>
 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">show</button>
17 <button id="fade">fade</button>
18 <button id="slideDown">slideDown</button>
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>

html代码中写明了三种不同状态的弹窗形式，show() 带时间参数的动画展示，fadeIn()展示，slideDown()展示。

必填的对象是objFrame:'.msg',showBtn:'#show',closeBtn:'.close'。

  • objFrame-显示哪个模块
  • showBtn-显示弹窗按钮
  • closeBtn-关闭弹窗按钮

jQuery插件：

 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('<div class="pageFrameLayer" style="height:100%; width: 100%; position: absolute; top:0; left:0; bottom:0; right:0; background: #000; opacity:0.4; z-index: 1; "></div>');
78             }
79         }
80 
81     }
82 
83 })(jQuery)

 

posted @ 2014-05-13 09:57  勤劳的码农  阅读(1313)  评论(2)  编辑  收藏  举报