首页 / 脚本样式 / JavaScript / 原创jQuery弹出层插件分享

/** * jQuery弹出层插件 ** @author lanhaoooo@163.com * @since 2014-08-23 */（function（$） {var methods = {o : {isIe : ！-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9、IE10的ie6 : ！-[ 1, ] && ！window.XMLHttpRequest,ie9_10 : document.documentMode >= 9,bgLayer : "layerModel_mask",dataId : "layerModel_main",wrapper : "layerModel_wrapper",warpperContent : "layerModel_content",warpperTitle : "layerModel_title",warpperCloseBtn : "layerModel_closeBtn",warpperOwnContent : "layerModel_ownContent",replaceClose : "replaceClose",dragableClass : "dragable",defaultWidth : 300},generateId : function（）{return "_" + new Date（）.getTime（）;},init : function（data, options） {//left和top想要使用的时候请设置center为false，这样的情况下才会生效，如果center = true则该设置不生效 #666,#999,#e5dfda ,#e5e5e5,#ff8800var defaults = {center:true,locked:true,fixed:true,drag:true,zIndex:9999,opacity:"0.5",title:"系统提示",staySame:false,width:0,height:0,timer:0,bgColor:"#fffaf6",left:350,top:100,head:true,isClose:true,shake:false,close : function（）{return true;}};options = $.extend（defaults, options）;var s = this;var generateId = s.generateId（）;if （typeof data === "object"） {data = data instanceof $ ? data : $（data）;if（options.staySame） {data = s.createRender（data, options, generateId）.hide（）;} else {data = s.createContainer（data, options, generateId）.hide（）;}} else if （typeof data === "string" || typeof data === "number"） {data = $（"<div id=""+s.o.dataId + generateId +""></div>"）.html（data）.appendTo（document.body）.hide（）;} else {alert（"Layer Error : Unsupporte data type :" + typeof data）;return;}if （options.locked && ！s.hasBgLayer（）） {$（"<div class=""+s.o.bgLayer+"" id="" + s.o.bgLayer + ""></div>"）.appendTo（document.body）.css（{"background" : options.bgColor,"opacity" : options.opacity}）;}data.css（{"position" : options.fixed ? s.o.ie6 ? "absolute" : "fixed" : "absolute","z-index" : options.zIndex,"left" : options.left,"top" : options.top}）.show（）;if （options.center） {s.fixLayer（data）;$（window）.bind（"resize scroll", function（） {s.fixLayer（data）;}）;}if （options.drag） {s.dragLayer（data, options）;}if（options.shake） {s.shakeLayer（data）;}var timeOut;clearTimeout（timeOut）;if（options.timer > 0）{timeOut = window.setTimeout（function（）{$（"#"+s.o.replaceClose + generateId）.trigger（"click"）;}, options.timer）;}return data;},createContainer : function（data, options,generateId） {var s = this;//如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方var isHtmlSlice = data.context == undefined ? true : false;var wrapperHtml = "<div class=""+s.o.wrapper+"" id=""+s.o.wrapper + generateId+"">"+ "<div class=""+s.o.warpperContent+"" id=""+s.o.warpperContent + generateId+"">"+ "<a class=""+s.o.replaceClose+"" id=""+s.o.replaceClose + generateId+""></a>";if（options.head）{wrapperHtml+= "<h4 class=""+s.o.warpperTitle+" "+s.o.dragableClass+"" id=""+s.o.warpperTitle + generateId+"">";if（options.isClose）{wrapperHtml+= "<a href="javascript:void（0）;" title="关闭" class=""+s.o.warpperCloseBtn+"" id=""+s.o.warpperCloseBtn + generateId+"">×</a>";}wrapperHtml+= options.title + "</h4>";}wrapperHtml+= "<div id=""+s.o.warpperOwnContent + generateId+"" class=""+s.o.warpperOwnContent+""></div>"+ "</div>"+ "</div>";s.container = $（wrapperHtml）;s.container.appendTo（document.body）;data.clone（true）.appendTo（"#"+s.o.warpperOwnContent + generateId）.show（）.attr（"id",data.attr（"id"） || s.o.dataId + generateId）;//div默认宽度为100%，所以建议将所有弹出的元素设置宽度，否则弹出层宽度为100%var w = $（"#"+data.attr（"id"））.width（） || $（"#"+s.o.dataId + generateId）.width（） || s.o.defaultWidth;//指定了高度var tempWidth = w;if（options.height > 0 ） {if（options.width > 0）{tempWidth = options.width;if（options.width <= w）{$（"#"+s.o.warpperOwnContent + generateId）.css（{"width":options.width,"overflow-x":"auto"}）;} else {//如果指定的宽度大于元素本身的宽度，那么需要将元素居中//让元素始终居中显示var xPadding = （options.width - w） / 2 + 8;$（"#"+s.o.warpperOwnContent + generateId）.css（{"padding" : "4px " + xPadding + "px"}）;}}s.container.width（tempWidth + 32）;$（"#"+s.o.warpperContent + generateId）.width（tempWidth + 30）;$（"#"+s.o.warpperOwnContent + generateId）.css（{"height":options.height,"overflow-y":"auto"}）;} else {if（options.width > 0） {tempWidth = options.width;if（options.width <= w） {$（"#"+s.o.warpperOwnContent + generateId）.css（{"width":options.width,"overflow-x":"auto"}）;}}s.container.width（tempWidth + 22）;$（"#"+s.o.warpperContent + generateId）.width（tempWidth + 20）;}$（"#"+s.o.warpperCloseBtn + generateId）.click（function（e） {$（"#"+s.o.replaceClose + generateId）.trigger（"click"）;}）;$（"#"+s.o.replaceClose + generateId）.click（function（e） {s.close（$（"#"+s.o.wrapper + generateId）, options, generateId）;e.stopPropagation（）;}）;if（！isHtmlSlice）{// 让传入的元素在对话框关闭后可以返回到原来的地方var display = data.css（"display"）;var obj = data[0];var prev = obj.previousSibling;var next = obj.nextSibling;var parent = obj.parentNode;this["elemBack_" + generateId] = function（）{if （prev && prev.parentNode） {prev.parentNode.insertBefore（obj, prev.nextSibling）;} else if （next && next.parentNode） {next.parentNode.insertBefore（obj, next）;} else if （parent） {parent.appendChild（obj）;};data.css（{"display" : display}）;};}data.detach（）;return s.container;},createRender : function（data, options,generateId）{var s = this;//如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方var isHtmlSlice = data.context == undefined ? true : false;s.container = $（"<div class=""+s.o.wrapper+"" style="border:none;" id=""+s.o.wrapper + generateId+""><a class=""+s.o.replaceClose+"" id=""+s.o.replaceClose + generateId+""></a></div>"）;s.container.appendTo（document.body）;data.clone（true）.appendTo（s.container）.show（）.attr（"id",data.attr（"id"） || s.o.dataId + generateId）;$（"#"+s.o.replaceClose + generateId）.click（function（e） {s.close（$（"#"+s.o.wrapper + generateId）, options, generateId）;e.stopPropagation（）;}）;if（！isHtmlSlice）{// 让传入的元素在对话框关闭后可以返回到原来的地方var display = data.css（"display"）;var obj = data[0];var prev = obj.previousSibling;var next = obj.nextSibling;var parent = obj.parentNode;s["elemBack_" + generateId] = function（）{if （prev && prev.parentNode） {prev.parentNode.insertBefore（obj, prev.nextSibling）;} else if （next && next.parentNode） {next.parentNode.insertBefore（obj, next）;} else if （parent） {parent.appendChild（obj）;};data.css（{"display" : display}）;};}data.detach（）;return s.container;},isLastLayer : function（）{var s = this;return $（"." + s.o.wrapper）.length <= 0;},hasBgLayer : function（）{var s = this;return $（"." + s.o.bgLayer）.length > 0;},close : function（data, options ,generateId） {var s = this;//调用回调函数var result = options.close（）;if（result == undefined || result）{data.remove（）;if（s.isLastLayer（）） {$（"#" + s.o.bgLayer）.remove（）;}}if （s["elemBack_" + generateId]） {s["elemBack_" + generateId]（）;};},closeLayer : function（obj）{var s = this;var $wapper = $（obj）.parents（"div."+s.o.wrapper）;$（"."+s.o.replaceClose,$wapper）.trigger（"click"）;},fixLayer : function（data） {var s = this;var T = （$（window）.height（） - data.innerHeight（）） / 2 + （s.o.ie6 ? $（document）.scrollTop（） : data.scrollTop（））;var L = （$（window）.width（） - data.width（）） / 2 + （s.o.ie6 ? $（document）.scrollLeft（） : data.scrollLeft（））;data.css（{"left" : L,"top" : T}）;},dragLayer : function（data, options） {var s = this;var move = false;// 移动标记var x = 0, y = 0;// 鼠标离控件左上角的相对位置var o = data.find（"." + s.o.dragableClass）.css（{"cursor" : "move"}）;var a = o[0];o.mousedown（function（e） {//IE9 IE10居然把e.button改成0了，艹var isLeftClick = （s.o.isIe && e.button == 1） || （！s.o.isIe && e.button == 0） || （s.o.ie9_10 && e.button == 0）;if （isLeftClick） {data.fadeTo（20, 0.25）;// 点击后开始拖动并透明显示s.o.isIe ? a.setCapture（） : window.captureEvents（Event.MOUSEMOVE）;move = true;x = e.pageX - parseInt（data.css（"left"））;y = e.pageY - parseInt（data.css（"top"））;$（document）.mousemove（function（e） {if （move） {var sx = e.pageX - x;// 移动时根据鼠标位置计算控件左上角的绝对位置var sy = e.pageY - y;data.css（{"top" : sy,"left" : sx}）;}}）.mouseup（function（） {data.fadeTo（"fast", 1）;// 松开鼠标后停止移动并恢复成不透明move = false;x = 0;y = 0;s.o.isIe ? a.releaseCapture（） : window.captureEvents（Event.MOUSEMOVE|Event.MOUSEUP）;}）;} else {return false;}}）;},shakeLayer : function（data）{var ll = （$（window）.width（） - data.width（）） / 2;var loop = 4;for（var i=1; i<=loop; i++）{data.animate（{left:ll - （loop * 10 - 10 * i）},50）;data.animate（{left:ll + 2*（loop * 10 - 10 * i）},50）;}}};$.fn.layerModel = function（options） {methods.init（this, options）;};$.fn.close = function（） {methods.closeLayer（this）;};$.fn.fix = function（） {var mn = $（this）.parents（"." + methods.o.wrapper）;methods.fixLayer（$（mn[0]））;};}）（jQuery）;