首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

Posted in Javascript onMarch 01, 2012

最终效果： 

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>弹出层插件:jquery.artwl.thickbox.js</title> 
<script src="/js_lib/jQuery-1.7.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
/* File Created: 三月 1, 2012 Author:artwl */ 
;(function ($) { 
$.extend({ 
artwl_bind: function (options) { 
options=$.extend({ 
showbtnid:"", 
title:"", 
content:"" 
},options); 
var mask = '<div id="artwl_mask"></div>'; 
var boxcontain = '<div id="artwl_boxcontain">\ 
<a id="artwl_close" href="javascript:void(0);" title="Close"></a>\ 
<div id="artwl_showbox">\ 
<div id="artwl_title">\ 
<h2>\ 
Title</h2>\ 
</div>\ 
<div id="artwl_message">\ 
Content<br />\ 
</div>\ 
</div>\ 
</div>'; 
var cssCode = 'html, body, h1, h2, h3, h4, h5{margin: 0px;padding: 0px;}\ 
#artwl_mask{background-color: #000;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.5;filter: alpha(opacity=50);display: none;}\ 
#artwl_boxcontain{margin: 0 auto;position: absolute;z-index: 2;line-height: 28px;display: none;}\ 
#artwl_showbox{padding: 10px;background: #FFF;border-radius: 5px;margin: 20px;min-width:300px;min-height:200px;}\ 
#artwl_title{position: relative;height: 27px;border-bottom: 1px solid #999;}\ 
#artwl_close{position: absolute;cursor: pointer;outline: none;top: 0;right: 0;z-index: 4;width: 42px;height: 42px;overflow: hidden;background-image: url(/upload/201203/20120301220903376.png);_background: none;}\ 
#artwl_message{padding: 10px 0px;overflow: hidden;line-height: 19px;}'; 
if ($("#artwl_mask").length == 0) { 
$("body").append(mask + boxcontain); 
$("head").append("<style type='text/css'>" + cssCode + "</style>"); 
if(options.title!=""){ 
$("#artwl_title").html(options.title); 
} 
if(options.content!=""){ 
$("#artwl_message").html(options.content); 
} 
} 
$("#"+options.showbtnid).click(function () { 
var height = $("#artwl_boxcontain").height(); 
var width = $("#artwl_boxcontain").width(); 
$("#artwl_mask").show(); 
$("#artwl_boxcontain").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); 
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { 
width = $(window).width() > 600 ? 600 : $(window).width() - 40; 
$("#artwl_boxcontain").css("width", width + "px").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); 
$("#artwl_mask").css("width", $(window).width() + "px").css("height", $(window).height() + "px").css("background", "#888"); 
$("#artwl_close").css("top", "30px").css("right", "30px").css("font-size", "20px").text("关闭"); 
} 
}); 
$("#artwl_close").click(function () { 
$("#artwl_mask").hide(); 
$("#artwl_boxcontain").hide(); 
}); 
}, 
artwl_close:function(options){ 
options=$.extend({ 
callback:null 
},options); 
$("#artwl_mask").hide(); 
$("#artwl_boxcontain").hide(); 
if(options.callback!=null){ 
options.callback(); 
} 
} 
}); 
})(jQuery); 
$(function () { 
$.artwl_bind({ showbtnid: "btn_show", title: "From Cnblogs Artwl", content: $("#Content").html() }); 
}); 
function test() { 
alert("Before close"); 
$.artwl_close({ callback: other }); 
} 
function other() { 
alert("After close"); 
} 
</script> 
</head> 
<body> 
<h3>弹出层插件jquery.artwl.thickbox.js(https://3water.com)</h3> 
<input type="button" value="Click Me" id="btn_show" /> 
<span id="Content" style="display:none;"> 
<a href="https://3water.com">Artwl</a><br /> 
<input type="button" onclick="test()" value="Test"/> 
</span> 
</body> 
</html>

插件原理

所有弹出层的原理都差不多，就是用一个全屏半透明DIV做遮罩层，在这个遮罩层上再显示出一个层放要显示的内容，其他的就是CSS的运用了。

本插件为了使用简单，把JS跟CSS封装在了一个JS文件(插件)中，所以使用起来非常方便，做到了一行代码调用。
插件源代码

插件(jquery.artwl.thickbox.js)的源码如下： 

/* File Created: 三月 1, 2012 Author:artwl blog:http://artwl.cnblogs.com */ 
;(function ($) { 
$.extend({ 
artwl_bind: function (options) { 
options=$.extend({ 
showbtnid:"", 
title:"", 
content:"" 
},options); 
var mask = '<div id="artwl_mask"></div>'; 
var boxcontain = '<div id="artwl_boxcontain">\ 
<a id="artwl_close" href="javascript:void(0);" title="Close"></a>\ 
<div id="artwl_showbox">\ 
<div id="artwl_title">\ 
<h2>\ 
Title</h2>\ 
</div>\ 
<div id="artwl_message">\ 
Content<br />\ 
</div>\ 
</div>\ 
</div>'; 
var cssCode = 'html, body, h1, h2, h3, h4, h5{margin: 0px;padding: 0px;}\ 
#artwl_mask{background-color: #000;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.5;filter: alpha(opacity=50);display: none;}\ 
#artwl_boxcontain{margin: 0 auto;position: absolute;z-index: 2;line-height: 28px;display: none;}\ 
#artwl_showbox{padding: 10px;background: #FFF;border-radius: 5px;margin: 20px;min-width:300px;min-height:200px;}\ 
#artwl_title{position: relative;height: 27px;border-bottom: 1px solid #999;}\ 
#artwl_close{position: absolute;cursor: pointer;outline: none;top: 0;right: 0;z-index: 4;width: 42px;height: 42px;overflow: hidden;background-image: url(/Images/feedback-close.png);_background: none;}\ 
#artwl_message{padding: 10px 0px;overflow: hidden;line-height: 19px;}'; 
if ($("#artwl_mask").length == 0) { 
$("body").append(mask + boxcontain); 
$("head").append("<style type='text/css'>" + cssCode + "</style>"); 
if(options.title!=""){ 
$("#artwl_title").html(options.title); 
} 
if(options.content!=""){ 
$("#artwl_message").html(options.content); 
} 
} 
$("#"+options.showbtnid).click(function () { 
var height = $("#artwl_boxcontain").height(); 
var width = $("#artwl_boxcontain").width(); 
$("#artwl_mask").show(); 
$("#artwl_boxcontain").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); 
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) { 
width = $(window).width() > 600 ? 600 : $(window).width() - 40; 
$("#artwl_boxcontain").css("width", width + "px").css("top", ($(window).height() - height) / 2).css("left", ($(window).width() - width) / 2).show(); 
$("#artwl_mask").css("width", $(window).width() + "px").css("height", $(window).height() + "px").css("background", "#888"); 
$("#artwl_close").css("top", "30px").css("right", "30px").css("font-size", "20px").text("关闭"); 
} 
}); 
$("#artwl_close").click(function () { 
$("#artwl_mask").hide(); 
$("#artwl_boxcontain").hide(); 
}); 
}, 
artwl_close:function(options){ 
options=$.extend({ 
callback:null 
},options); 
$("#artwl_mask").hide(); 
$("#artwl_boxcontain").hide(); 
if(options.callback!=null){ 
options.callback(); 
} 
} 
}); 
})(jQuery);

调用也非常简单，在页面引入此JS文件后，在页面加载方法中调用如下代码即可：
$.artwl_bind({ showbtnid: "btn_show", title: "From Cnblogs Artwl", content: $("#Content").html() });

这三个参数非常简单，第一个是弹出层触发事件的元素ID，第二个为弹出层的标题，第三个为弹出层的内容
注意事项

为了使用方便，本插件把JS跟CSS写在了一个文件中，如果要调整弹出层的样式可以修改如下CSS即可。

插件CSS代码： 

html, body, h1, h2, h3, h4, h5 { 
margin: 0px; 
padding: 0px; 
} 
#artwl_mask { 
background - color: #000; 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
opacity: 0.5; 
filter: alpha(opacity= 50); 
display: none; 
} 
#artwl_boxcontain { 
margin: 0 auto; 
position: absolute; 
z - index: 2; 
line - height: 28px; 
display: none; 
} 
#artwl_showbox { 
padding: 10px; 
background: #FFF; 
border - radius: 5px; 
margin: 20px; 
min - width: 300px; 
min - height: 200px; 
} 
#artwl_title { 
position: relative; 
height: 27px; 
border - bottom: 1px solid #999; 
} 
# artwl_close { 
position: absolute; 
cursor: pointer; 
outline: none; 
top: 0; 
right: 0; 
z - index: 4; 
width: 42px; 
height: 42px; 
overflow: hidden; 
background - image: url(/Images/feedback - close.png); 
_background: none; 
} 
#artwl_message { 
padding: 10px 0px; 
overflow: hidden; 
line - height: 19px; 
}

另外，针对IE6不支持透明作了特殊处理，在IE6下显示为：

jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

IE6

jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

其他浏览器


Demo下载地址：http://xiazai.3water.com/201203/yuanma/thickbox_demo.rar

jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 #Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 #Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 #Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 #Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 #Javascript
js FLASH幻灯片字符串中有连接符＆的处理方法
Mar 01 #Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 #Javascript
外键(1) 代理(2) SQL注入(2) #{}(1) 克隆(1) 增删查改(1) 选择器(1) canvas(2) IC-R9500(1) 脏读(2)
You might like
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
js实现筛选功能
2020/11/24 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python Series从0开始索引的方法
2018/11/06 Python
python调用c++传递数组的实例
2019/02/13 Python
python 字符串常用方法汇总详解
2019/09/16 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
男女钓鱼靴和甲板鞋：XTRATUF
2021/01/09 全球购物
数百万免费的图形资源：Freepik
2020/09/21 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
卖车协议书
2014/04/21 职场文书
优质服务演讲稿
2014/05/14 职场文书
授权委托书
2014/09/17 职场文书
成都人事代理协议书
2014/10/25 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
小学科学课教学反思
2016/02/23 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers