再谈pop.js
弹出层相信是在JS需求中随处可见，之前写过类似的文章，见：http://web302.com/2010/09/v-colombias-pop-pop-up-plug-in-changes-to-the-points/ 但是经过一段时间使用，做了如下修改：
/* 1.自动化show, 2.增加onShow和onHide事件 3.自动寻找关闭按钮和移动标题栏 */ (function($){ function drop(objs,dragDivid){ objs.css('cursor','move') .unbind('mousedown') .bind('mousedown',function(e){ var posX; var posY; var fdiv = document.getElementById(dragDivid); if(!e) e = window.event; posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); function mousemove(ev){ if(ev==null) ev = window.event; fdiv.style.left = (ev.clientX - posX) + "px"; fdiv.style.top = (ev.clientY - posY) + "px"; return false; } $(document).unbind('mousemove',mousemove); $(document).mousemove(mousemove).mouseup(function(){ $(document).unbind('mousemove',mousemove); }); }); } function setDivPox(jqBackDiv,jqPopDiv,isScrollEvent) { //自动判断当前是否支持W3C标准的 var bodyObj = document.documentElement; //文档没有DOCTYPE声明，是 HTML文档,否则是XHTML文档 if(document.compatMode == 'BackCompat'){ bodyObj = document.body; } //--设置遮罩层为满屏 jqBackDiv.width(Math.max(bodyObj.scrollWidth, document.documentElement.clientWidth)); jqBackDiv.height(Math.max(bodyObj.scrollHeight, document.documentElement.clientHeight)); //调整要显示的DIV的位置 var dleft = bodyObj.clientWidth/2 - jqPopDiv.width()/2; var dtop = bodyObj.clientHeight/2 - jqPopDiv.height()/2; //如果是Scroll事件 if(typeof(isScrollEvent)!= 'undefined' && isScrollEvent){ dleft += bodyObj.scrollLeft + document.body.scrollLeft; dtop += bodyObj.scrollTop + document.body.scrollTop; } jqPopDiv.css({left:dleft,top:dtop,position:'absolute',zIndex:1001}); } function pop(options,jq){ $.extend(this.options,options || {}); this.jq = jq; } pop.prototype={ options:{ backDivColor:'#333',//遮罩层的颜色 showAnimate:false, //弹出层显示时是否有动画效果 onHide:function(){}, onShow:function(){}, backDivId:'pop__div__id'//遮罩层的ID,一般不在程序中设置 }, show:function(){ var self = this; //弹出一个遮罩层 var backDivId = this.options.backDivId; //--如果弹出层不存在则添加 if($('#'+backDivId).length < 1){ //--遮罩层追加到 body //#333 var divStr = ' '; $(divStr).appendTo('body'); } //设置位置 setDivPox($('#'+backDivId),this.jq); //动画效果显示出来 $('#'+backDivId).show(); this.options.showAnimate ? this.jq.fadeIn("slow") : this.jq.show(); this.jq.data('resize',function(){ setTimeout(function(){ setDivPox($('#'+backDivId),self.jq); },10); }); this.jq.data('scroll',function(){ setTimeout(function(){ setDivPox($('#'+backDivId),self.jq,true); },10); }); this.jq.data('_hide',function(){ self.hide(); }); $(window).resize(this.jq.data('resize')).scroll(this.jq.data('scroll')); this.jq.find('[close]').click(this.jq.data('_hide')); drop(this.jq.find('[drop]'),this.jq.attr('id')); this.options.onShow.call(this); return this; }, hide:function(){ this.jq.hide(); $('#'+this.options.backDivId).hide(); $(window).unbind('resize',this.jq.data('resize')).unbind('scroll',this.jq.data('scroll')); this.jq.find('[close]').unbind('click',this.jq.data('_hide'));//取消事件的绑定 this.jq.removeData('_hide').removeData('scroll').removeData('_hide');//移除data this.options.onHide.apply(this); return this; } }; $.fn.extend({pop:function(config){ return new pop(config,this).show(); }}); })(jQuery);
请看下面的demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出层</title> <meta name="Keywords" content="" /> <meta name="description" content="" /> <script src='jquery.tools.min.js'></script> <script src='pop.js'></script> <script> function test(){ $('#tcc').pop({ onShow:function(){ alert('展示') }, onHide:function(){ alert(this.jq.attr('style'));//通过this.jq可以访问到弹出层的jquery对象 alert('隐藏'); } }); } </script> </head> <body> <button onclick="test();">点我</button> <div id="tcc" style="background-color:red;width:500px;height:300px;display:none"> <div style="background-color:white;height:20px;" drop=1>我可以拖动</div> <a href="###" style="float:right;" close="1">关闭</a><button close="1">关闭</button> <div style="background-color:white;height:20px;top:200px;" drop=1>我也可以拖动</div> </div> </body> </html>
说明：
1 在弹出层中的子DOM对象，其属性为drop=1的都可以拖动
2 在弹出层中的子DOM对象，其属性为close=1的都可以关闭
3 onShow和onHide是展示和关闭的回调，可以不设置，回调中的this为pop对象，this.jq可以访问弹出层的jquery对象
