依赖jquery,兼容IE6\\7\\8 火狐 chrom 等主流浏览器(绝对原创), 不过请求大神帮我提升点效率。
/** * 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,#ff8800 var 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);
以上所述就是本文的全部内容了,希望大家能够喜欢。
本文地址:https://www.stayed.cn/item/4607
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我