原創(chuàng)jQuery彈出層插件分享
更新時(shí)間：2015年04月02日 11:05:02 投稿：hebedich
我們?cè)谇岸碎_(kāi)發(fā)，經(jīng)常要用到彈出層的效果，以前很早前就想將這個(gè)功能整理成一個(gè)公共的接口來(lái)實(shí)現(xiàn)了；自寫(xiě)的第一個(gè)jQuery插件，這里分享給大家，有需要的小伙伴參考下。
依賴jquery，兼容IE6\7\8 火狐 chrom 等主流瀏覽器（絕對(duì)原創(chuàng)）， 不過(guò)請(qǐng)求大神幫我提升點(diǎn)效率。
/**
* 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想要使用的時(shí)候請(qǐng)?jiān)O(shè)置center為false，這樣的情況下才會(huì)生效，如果center = true則該設(shè)置不生效 #666,#999,#e5dfda ,#e5e5e5,#ff8800
var defaults = {center:true,locked:true,fixed:true,drag:true,zIndex:9999,opacity:"0.5",title:"系統(tǒng)提示",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未定義，則是通過(guò)html拼接的方式追加的否則就是原本就存在的，關(guān)閉后需要返回原地方
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='關(guān)閉' 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默認(rèn)寬度為100%，所以建議將所有彈出的元素設(shè)置寬度，否則彈出層寬度為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){
// 讓傳入的元素在對(duì)話框關(guān)閉后可以返回到原來(lái)的地方
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未定義，則是通過(guò)html拼接的方式追加的否則就是原本就存在的，關(guān)閉后需要返回原地方
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){
// 讓傳入的元素在對(duì)話框關(guān)閉后可以返回到原來(lái)的地方
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;
//調(diào)用回調(diào)函數(shù)
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;// 移動(dòng)標(biāo)記
var x = 0, y = 0;// 鼠標(biāo)離控件左上角的相對(duì)位置
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);// 點(diǎn)擊后開(kāi)始拖動(dòng)并透明顯示
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;// 移動(dòng)時(shí)根據(jù)鼠標(biāo)位置計(jì)算控件左上角的絕對(duì)位置
var sy = e.pageY - y;
data.css({"top" : sy,"left" : sx});
}
}).mouseup(function() {
data.fadeTo("fast", 1);// 松開(kāi)鼠標(biāo)后停止移動(dòng)并恢復(fù)成不透明
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);
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- 小巧強(qiáng)大的jquery layer彈窗彈層插件
- jQuery彈出層插件Lightbox_me使用指南
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- js彈出層(jQuery插件形式附帶reLoad功能)
- Jquery實(shí)現(xiàn)彈出層分享微博插件具備動(dòng)畫(huà)效果
- jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件
- 基于jquery的blockui插件顯示彈出層
- boxy基于jquery的彈出層對(duì)話框插件擴(kuò)展應(yīng)用 彈出層選擇器
- jQuery Dialog 彈出層對(duì)話框插件
- jQuery彈層插件jquery.fancybox.js用法實(shí)例
相關(guān)文章
jQuery EasyUI API 中文文檔 - Tree樹(shù)使用介紹
jQuery EasyUI API 中文文檔 - Tree樹(shù)使用介紹，需要的朋友可以參考下。2011-11-11
jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播效果
本文給大家介紹的是使用jQuery實(shí)現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了jQuery中nextUntil()方法用法,實(shí)例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項(xiàng),需要的朋友可以參考下2015-01-01
jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果實(shí)戰(zhàn)（4）
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)標(biāo)簽頁(yè)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jquery的ajax如何使用ajaxSetup做全局請(qǐng)求攔截
在Web開(kāi)發(fā)中,Ajax是一種常用的前后端數(shù)據(jù)交互技術(shù),由于業(yè)務(wù)需求的復(fù)雜性和安全性的考慮,我們可能需要對(duì)Ajax請(qǐng)求進(jìn)行全局?jǐn)r截和處理,以便統(tǒng)一處理一些共性問(wèn)題,如權(quán)限驗(yàn)證、錯(cuò)誤處理等,本項(xiàng)目方案將介紹如何使用jQuery的Ajax實(shí)現(xiàn)全局請(qǐng)求攔截2023-11-11
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-06
jquery實(shí)現(xiàn)有過(guò)渡效果的tab切換
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)有過(guò)渡效果的tab切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
本篇文章主要是對(duì)cookie中的path與domain屬性進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了使用jQuery寫(xiě)的fadeTo,需要的朋友可以參考下2014-02-02
jquery插件hiAlert實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)話框美化
hiAlert是一款基于jQuery的信息提示插件，它支持操作成功、操作失敗和操作提醒三種信息提示方式。hiAlert瀏覽器兼容性非常好，支持更改提示內(nèi)容，支持定位提示框的位置，可配置插件參數(shù)。2015-05-05