Jquery 弹出层插件实现代码

200 阅读 0 评论 132 点赞

我是靠谱客的博主贪玩小天鹅，最近开发中收集的这篇文章主要介绍Jquery 弹出层插件实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

直接看代码：

复制代码代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="jquery-1.3.2.js" type="text/javascript"></script> 
<script src="jquery.layer.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#button").click(function() { 
var layer = $('none').layer({ content: '这里是层内容，默认焦点可以用none对象来代替' }); 
layer.open(); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<input id="button" type="button" value="第一个层" /> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<input type="button" onclick="$(this).layer({ content: $('#content') }).open();" value="第二个层" /> 
<div id="content" style="display:none;"> 
我是Dom对象内的内容 
<input id="aaa" type="text" value="我是表单" /> 
</div> 
</form> 
</body> 
</html>

复制代码代码如下:

/* 
* 作者：彭白洋 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;}
*/ 
/// <reference path="jquery-1.3.2-vsdoc.js" /> 
(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("<link href="" + base.options.cssurl + "" rel="stylesheet" type="text/css" />"); 
$.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 = $("<div style="display:none; z-index:" + $.layer.maskLayerIndex + "; filter: alpha(opacity:" + base.options.masklayer.alpha + "); left: 0px; width: 100%; position: absolute; top: 0px; height: " + $(document, base.options.target).height() + "px; background-color:" + base.options.masklayer.bgcolor + ""></div>"); 
base.$masklayer.appendTo("body", base.options.target).animate({ 
opacity: 'toggle' 
}, 500); 
} 
}); 
} 

//开始移动 
base.moveStart = function(event) { 
base.moveing = true; 
base.bgColor = base.$layerBox.css("background-color"); 
base.$layerBox.css("background-color", "Transparent").children().hide(); 

base.posX = event.pageX - base.$layerBox.offset().left; 
base.posY = event.pageY - base.$layerBox.offset().top; ; 
$(document).mousemove(function(event) { 
base.moveOn(event); 
}).mouseup(function() { 
base.moveStop(); 
}); 
if ($.browser.msie) { 
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) }); 
return 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(base.$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, 
width: 0, 
height: 0, 
opacity: "hide" 
}, "hide", function() { 
$(this).remove(); 
}); 
}); 
} 
else { 
base.$layerBox.animate({ 
left: base.$el.offset().left, 
top: base.$el.offset().top, 
width: 0, 
height: 0, 
opacity: "hide" 
}, "hide", 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: "层内容", 
width: 500, 
height: 300, 
template: "<div class="layer-box"><div class="layer-bar"><div class="layer-title"></div><span class="layer-close">×</span></div><div class="layer-content"></div></div>" 
} 

$.fn.layer = function(options) { 
return new $.layer(this, options); 
} 
})(jQuery);