Jquery 弹出层插件实现代码


Posted in Javascript onOctober 24, 2009

直接看代码:

<%@ 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
Javascript 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
js 操作符实例代码
Oct 24 #Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 #Javascript
JS window.opener返回父页面的应用
Oct 24 #Javascript
JavaScript 动态添加表格行 使用模板、标记
Oct 24 #Javascript
javascript Keycode对照表
Oct 24 #Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 #Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 #Javascript
You might like
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python编程线性回归代码示例
2017/12/07 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
学习Django知识点分享
2019/09/11 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
工作的心得体会
2013/12/31 职场文书
大学毕业感言100字
2014/02/03 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
生产现场禁烟通知
2015/04/23 职场文书
交通安全教育主题班会
2015/08/12 职场文书
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技