Jquery 弹出层插件实现代码_jquery-js教程-PHP中文网

首页

web前端

js教程

Jquery 弹出层插件实现代码_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:43 PM

jquery弹出层

直接看代码：

复制代码代码如下:

/* 
* 作者：彭白洋 2009.10.24
* 功能：可弹出自定义字符串、Dom对象，根据事件焦点弹出、关闭动画
* 调用方法：
* 1、初始化直接打开：$("#buttonID").layer().open()；
* 2、初始化：var layer=$("#buttonID").layer()；打开：layer.open()；关闭：layer.close()；
* 3、初始化：var layer=$("#buttonID").layer({自定义配置})；打开：layer.open()；关闭：layer.close()；
*样式： 
* .layer-box{background-color:#fff;width: 692px;border: 1px solid #ccc;position:absolute;} 
* .layer-box div.layer-bar{background: #f4f4f4;padding: 5px;margin:0px;text-align:left;height:18px;position:relative;} 
* .layer-box div.layer-bar span.layer-close{position:absolute;width:18px;height:18px;top:0px;right:0px;cursor:pointer;} 
* .layer-box div.layer-content{margin:0px;padding:5px 0px 0px 0px;text-align:center;}
*/ 
/// 
(function($) { 
$.layer = function(element, options) { 
var base = this; 
base.$el = $(element); 
base.tagHide = true; 
//初始化层 
base.init = function() { 

base.options = $.extend({}, $.layer.defaults, options); 
base.$layerBox = $(base.options.template); 
base.posX = base.posY = 0; 
base.moveing = false; 

//加载样式 
if (!$.layer.hasCss && base.options.cssurl != "") { 
$("head", base.options.target).append(""); 
$.layer.hasCss = true; 
} 

//加载层对象 
$.layer.maskLayerIndex += 20; //调高层位置 
base.$layerBox.appendTo("body", base.options.target).css({ "z-index": $.layer.maskLayerIndex }).hide(); 
base.$layerBox.find("div[class='layer-title']").append(base.options.title); 
//判断内容是字符串还是Jquery对象 
if (typeof (base.options.content) == "object") { 
base.$tempContentParent = base.options.content.parent(); 
base.tagHide = base.options.content.is(":hidden"); 
base.$tempContent = base.options.content.clone(); 
base.options.content.appendTo(base.$layerBox.find("div[class='layer-content']")).show(); 
} 
else { 
base.$layerBox.find("div[class='layer-content']").append(base.options.content); 
} 
//绑定关闭按钮事件 
base.$layerBox.find("span[class='layer-close']").mousedown(function(event) { 
//阻止事件冒泡 
if (event && event.stopPropagation) { 
event.stopPropagation(); 
} else { 
window.event.cancelBubble = true; 
} 
base.close(); 
return false; 
}); 
base.$layerBox.find("div[class='layer-bar']").mousedown(function(event) { 
base.moveStart(event); 
}); 
//base.$layerBox.show(); 


} 

//打开层 
base.open = function() { 
//层显示动画 
//alert($("html", base.options.target).height()); 
var mtop = ($("html", base.options.target).height() - base.options.height) / 2 + $(document, base.options.target).scrollTop(); // 
var mleft = $("html", base.options.target).width() / 2 - base.options.width / 2; // 
base.$layerBox.css({ top: base.$el.offset().top, left: base.$el.offset().left, width: 0, height: 0 }).animate({ 
left: mleft, 
top: mtop, 
width: base.options.width, 
height: base.options.height, 
opacity: "show" 
}, "slow", function() { 
//加载遮罩层 
if (base.options.masklayer.show) { 
$.layer.maskLayerIndex -= 10; //降低层位置 
base.$masklayer = $("
"); 
base.$masklayer.appendTo("body", base.options.target).animate({ 
opacity: 'toggle' 
}, 500); 
} 
}); 
} 

//开始移动 
base.moveStart = function(event) { 
base.moveing = true 
base.bgColor = base.$layerBox .css("背景颜色"); 
base.$layerBox.css("背景颜色", "透明").children().hide(); 

base.posX = 事件.pageX - base.$layerBox.offset().left; 
base.posY = event.pageY - base.$layerBox.offset().top; 
$(document).mousemove(function(event) ) { 
base.moveOn(event) 
}).mouseup(function() { 
base.moveStop(); 
}); { 
base.$layerBox.get(0).setCapture() 
} else { 
document.addEventListener("mousemove", base.moveOn, true); 

//移动中 
base.moveOn = function(event) { 
if (base.moveing) { 
window.getSelection && window.getSelection().removeAllRanges() 
base.$layerBox.css({ top: Math.max(event.pageY - base.posY, 0), left: Math.max(event.pageX - base.posX, 0) }); false; 
} 
} 

//移动停止 
base.moveStop = function() { 
base.$layerBox.css("background-color", base.bgColor ).children().show(); 
base.moveing = false; 
$(document, base.options.target).unbind("mousemove"); 
if ($.browser.msie) { 
base.$layerBox.get(0).releaseCapture(); 
} else { 
document.removeEventListener("mousemove", base.moveOn, true); 
} 
} 

//关闭层 
base.close = function() { 
if (base.$tempContent) { 
base.$tempContent.appendTo(基础。$tempContentParent); 
if(base.tagHide){ 
base.$tempContent.hide(); 
} 
} 
if (base.options.masklayer.show) { 
base.$masklayer.animate({ 
opacity: 'toggle' 
}, 500, function( ) { 
$(this).remove(); 
base.$layerBox.animate({ 
left: base.$el.offset().left, 
top: base.$el .offset().top, 
宽度: 0, 
高度: 0, 
不透明度: "隐藏" 
}, "隐藏", function() { 
$(this).删除();
}); 
} 
else { 
base.$layerBox.animate({ 
left: base.$el.offset().left, 
top: base.$el.offset().顶部, 
宽度: 0, 
高度: 0, 
不透明度: "隐藏" 
}, "隐藏", function() { 
$(this).remove() 
}); 
} 
} 

base.init(); 
} 

$.layer.hasCss = false; 
$.layer.maskLayerIndex = 1000; 
//默认配置 
$.layer.defaults = { 
masklayer: { show: true, bgcolor: '#eee', alpha: 50 }, // 是否显示覆盖层 
target: window.self.document, 
cssurl: "layer.css", 
title: "层标题", 
content: "层内容", 
宽度: 500, 
高度: 300 , 
模板：“
×
" 
} 

$.fn.layer = function(options) { 
返回新的 $.layer(this, options); 
} 
})(jQuery);


插件下载地址：
jquery.layer.js 