页面弹窗是网站中常用的交互效果，它可以强提示网站的某些信息给用户，或者作用于某些信息的修改等等功能。
这几天在做一个项目的时候，就顺捎把这个插件写一下，栽棵树，自己乘凉吧。
原创博文，转载请注明出处：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)
一个简单的页面弹窗插件 jquery.pageMsgFrame.js,布布扣,bubuko.com
时间： 2024-08-02 02:51:32