首页
所有分类
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 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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) 原神(1) LOL(1) 铁拳(1) 绿林侠盗(1) 大话西游(1) 模拟人生(1) 遗弃(1) 吸血鬼(1) 战锤40K(1)
You might like
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
json数据的列循环示例
2013/09/06 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
json 带斜杠时如何解析的实现
2019/08/12 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
python实现飞船大战
2020/04/24 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server