当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Jquery 弹出层插件实现代码

Javascript
JavaScript 继承详解（四）
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
js 实现无缝滚动 兼容IE和FF
js 对象是否存在判断
优化 JavaScript 代码的方法小结
表单元素事件 (Form Element Events)
js 动态创建 html元素
prototype 学习笔记整理
JavaScript 创建对象
javascript 全角转换实现代码
DOM 基本方法
用showModalDialog弹出页面后，提交表单总是弹出一个新窗口
javascript 动态创建 Option选项
javascript 7行代码画出一个围棋棋盘
比较简单的异步加载JS文件的代码
javascript 层隐藏和显示的代码
自定义滚动条3.0
javascript iframe内的函数调用实现方法
Prototype Class对象学习
Prototype RegExp对象 学习

No. « 146 147 148 149 »

技术文章搜索

关键字

Javascript 中的 Jquery 弹出层插件实现代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 318 ::
收藏到网摘: n/a

工作不忙，闲来无事写了一个弹出层插件，又需要的尽管拿去用啊有什么建议欢迎提出 直接看代码：
复制代码 代码如下:

<%@ 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);

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