依赖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 $ "<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 "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 "<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 "<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 "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 "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 "." + methods.o.wrapper); methods.fixLayer($(mn[0])); }; })(jQuery);
以上所述就是本文的全部内容了,希望大家能够喜欢。
标签:
jQuery,弹出层插件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“原创jQuery弹出层插件分享”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。