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