首页
所有分类
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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
js原型链原理看图说明
Jul 07 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
webpack多页面开发实践
Dec 18 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue如何截取字符串
May 06 Javascript
原生js实现的金山打字小游戏（实例代码详解）
Mar 16 Javascript
Postman内建变量常用方法实例解析
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) nacos(1) MyBatis(5) 优先队列(1) Dijkstra(1) 三角函数(1) 动态代理(1) seata(1) Carbon(1) Android Studio(4)
You might like
PHP安全配置
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
vue 重塑数组之修改数组指定index的值操作
2020/08/09 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python列表操作使用示例分享
2014/02/21 Python
Python实现股市信息下载的方法
2015/06/15 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
阿里巴巴英国：Alibaba英国
2019/12/11 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
取保候审保证书
2014/04/30 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
公关活动策划方案
2014/05/25 职场文书
设备售后服务承诺书
2014/05/30 职场文书
消防标语大全
2014/06/07 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
个人工作能力自我评价
2015/03/05 职场文书
网络营销实训总结
2015/08/03 职场文书
读后感怎么写？书写读后感的基本技巧！
2019/12/10 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
MySQL infobright的安装步骤
2021/04/07 MySQL