首页
所有分类
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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
vue超时计算的组件实例代码
Jul 09 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
vue中render函数的使用详解
Oct 12 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 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) Centos(8)  AD域(1) lnmp(1) Windows server 2012(17) 日志格式分析(1) Rewrite(4) destoon(1) lamp(1)
You might like
让你的WINDOWS同时支持MYSQL4，MYSQL4.1,MYSQL5X
2006/12/06 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
Laravel 5 框架入门（三）
2015/04/09 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
Jquery 扩展方法
2010/05/06 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
JS实现页面打印功能
2017/03/16 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python中随机函数random用法实例
2015/04/30 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python适合人工智能的理由和优势
2019/06/28 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python中判断文件结束符的具体方法
2020/08/04 Python
python requests库的使用
2021/01/06 Python
美国最大的团购网站：Groupon
2016/07/23 全球购物
英国奢侈品概念店：Base Blu
2019/05/16 全球购物
设计4个线程，其中两个线程每次对j增加1，另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
班训口号大全
2014/06/18 职场文书
高一军训的心得体会
2014/09/01 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
计划生育工作总结2015
2015/04/03 职场文书
演讲开场白台词大全
2015/05/29 职场文书