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 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
js 操作符汇总
Nov 08 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
JavaScript 数组去重详解
Sep 15 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
在PHP中使用redis
2013/11/04 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
eval的两组性能测试数据
2012/08/17 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
python地震数据可视化详解
2019/06/18 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
使用python远程操作linux过程解析
2019/12/04 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
浪漫婚礼主持词
2014/03/14 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014年商场工作总结
2014/11/22 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript