依赖jquery，兼容IE678 火狐 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+s.o.bgLayer+"' id='" + s.o.bgLayer + "'></div>").appendTo(document.body).css({"background" : options.bgColor,"opacity" : options.opacity}); } data.css({"position" : options.fixed "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+s.o.wrapper+"' id='"+s.o.wrapper + generateId+"'>" + "<div+s.o.warpperContent+"' id='"+s.o.warpperContent + generateId+"'>" + "<a+s.o.replaceClose+"' id='"+s.o.replaceClose + generateId+"'></a>"; if(options.head){ wrapperHtml+= "<h4+s.o.warpperTitle+" "+s.o.dragableClass+"' id='"+s.o.warpperTitle + generateId+"'>"; if(options.isClose){ wrapperHtml+= "<a href='javascript:void(0);' title='关闭'+s.o.warpperCloseBtn+"' id='"+s.o.warpperCloseBtn + generateId+"'>×</a>"; } wrapperHtml+= options.title + "</h4>"; } wrapperHtml+= "<div id='"+s.o.warpperOwnContent + generateId+"'+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+s.o.wrapper+"' id='"+s.o.wrapper + generateId+"'><a+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);

以上所述就是本文的全部内容了，希望大家能够喜欢。