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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7793字，纯文字阅读大概需要12分钟。

内容图文

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

最终效果：
代码如下:


<!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(//www.gxlcms.com)</h3> 
<input type="button" value="Click Me" id="btn_show" /> 
<span id="Content" style="display:none;"> 
<a href="//www.gxlcms.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下显示为： 

IE6

其他浏览器

Demo下载地址：http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar

内容总结

以上是互联网集市为您收集整理的jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件全部内容，希望文章能够帮你解决jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/368440.html

来源：【匿名】

【上一篇】Jquery提交表单 Form.js官方插件介绍【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件】教程文章相关的互联网学习教程文章

jQuery点击空白关闭弹出层【代码】【图】

给宝箱加上click事件，单击切换弹出层显示与隐藏，弹出层显示后单机任何地方都能让它关闭。这里用到了one()指令，给body绑定一个单次的操作，jQuery代码如下：$(‘#info li:eq(0)‘).click(function(){$(‘#iphone‘).toggle();$(‘body‘).one(‘click‘,function(){$(‘#iphone‘).hide();})return false; })实际上该处应该是点击非自身的空白（弹出层也算自身）关闭弹出层。还没找到解决办法，暂时挂起。原文：http://www.cnblo...

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题，和大家分享下，jquery实现点击按钮弹出层和点击空白处隐藏层的问题if($(‘.autoBtn‘).length){ $(‘.autoBtn‘).find(‘.assess‘).unbind().bind(‘click‘,function(event){ //取消事件冒泡 event.stopPropagation(); if($(‘.abtnBox‘).is(":hidden")){ $(‘.abtnBox‘).show(); ...

【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件【代码】

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox。它除了能够展示图片之外，还可以展示 flash、iframe 内容、html 文本以及 ajax 调用，我们可以通过 css 来自定义外观。fancybox 特点：可以支持图片、html 文本、flash 动画、iframe 以及 ajax 的支持；可以自定义播放器的 css 样式；可以以组的形式进行播放；如果将鼠标滚动插件（mouse wheel plugin）包含进来的话 fancybox 还能支持鼠标滚轮滚动来翻阅图片；fancybox...

自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7【代码】

版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部代码，so...极其蛋疼的事情出现了。管我的人要求不能用网上的插件。oh~~~my god!! 这是多么能让千万仅仅草原上的马儿奔腾的要求~~~先实现一个比較简单的功能：需求：网页遮罩层/弹出层。兼容IE6幸好本屌丝曾经聪明收集了个js的版本号，so。自己改写成了jQuery插件形式的，...

jquerymobile知识点三：弹出层popup【代码】【图】

弹出层popup很简单，主要就是弹出验证，登陆注册，提交信息之类的，下面是我写好的一个demo。。。 <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false"style="max-width: 460px;"class="ui-corner-all"><a href="#" data-rel="back" data-role="button" data-theme="e" data-icon="delete"data-iconpos="notext"class="ui-btn-right">Close</a><div data-role="header" dat...

nyroModal：强大的jQuery弹出层插件

nyromodal调用非常简单，只需在链接上加上class=”nyroModal”即可。支持模拟对话框类型：ajax调用：<a href=”http://nyromodal.nyrodev.com/demoSent.php” class=”nyroModal”>Ajax</a>ajax调用并支持抽取制定内容：如果只需要显示页面上某一个元素，那么只需要在请求时把该元素ID号做为锚点加入请求地址中。以下代码只显示demoSent.php中ID号为UserInfo的元素，如果UserInfo不存在，则显示所有内容。<a href=”http://nyromod...

Web前端设计模式制作漂亮的弹出层_jquery【图】

现在问题来了，这个版块不大，更新频率却很高，每天都有十数条最新的信息上去，浏览网站的会员对于最新图书的了解和需求越来越大，因此需要对这个板块进行改良，以满足会员的需求，会员的主要要求有以下几个方面：显示该最新上架的图书的封面缩略图，该图书的名称和作者名称，以及该书部分内容的介绍和作者的简介... 这下把Ben给愁坏掉了，首页上根本就没有多余的空间，怎么来呈现封面缩略图甚至是内容简介，如果去掉别的板块空间来...

基于jquery的blockui插件显示弹出层

blockui可以在你发送ajax请求的时候，显示一个遮罩层禁止用户对页面进行操作并显示提示信息；或者用来显示一个登陆窗口，也可用来显示图片等。　　blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏，可以在blockUI方法中指定一些参数，来控制弹出层显示的内容，大小，位置等。blockUI方法的常用的参数有：message,css,overlayCSS,showOverlay。　　message：主要用来设置要显示的内容，可以直接设置为一...

Jquery+CSS3实现一款简洁大气带滑动效果的弹出层【图】

此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层，应用范围很广泛，比如用在消息提示、弹出层显示内容、弹出层登录等，带遮罩效果，虽然没有封装成插件，但使用起来也非常简单，宽度和高度直接调样式。包含了以下功能： 1、弹出层 2、带关闭按钮 3、遮罩层效果 4、从上向下滑动显示 5、点击层外面任何地方关闭 6、绑定控制按钮 7、内容过多自动显示滚动条如果不满足大家的要求，自己可以二次开发哦效果如下：在线...

jQuery实现的AJAX简单弹出层效果【图】

这篇文章主要介绍了jQuery实现的AJAX简单弹出层效果代码,涉及jQuery响应鼠标事件动态操作页面元素实现弹出层效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现的AJAX简单弹出层效果。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns...

在实战项目中怎样使用jquerylayur弹出层

这次给大家带来在实战项目中怎样使用jquery layur弹出层，使用jquery layur弹出层的注意事项有哪些，下面就是实战案例，一起来看一下。Jquery必须大于1.83layui必须是all，否则不显示<script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script>html代码<input id="about" type="button" value="修改考勤" class="layui-btn layui-btn-normal" />主要js代码<script>$(input#about).on(click...

如何使用jquerylayui弹出层

这次给大家带来如何使用jquery layui弹出层，使用jquery layui弹出层的注意事项有哪些，下面就是实战案例，一起来看一下。Jquery必须大于1.83layui必须是all，否则不显示<script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script>html代码<input id="about" type="button" value="修改考勤" class="layui-btn layui-btn-normal" />主要js代码<script>$(input#about).on(click, function (...

jquerylayui弹出层使用详解

这次给大家带来jquery layui弹出层使用详解，jquery layui弹出层使用的注意事项有哪些，下面就是实战案例，一起来看一下。Jquery必须大于1.83layui必须是all，否则不显示<script src="../js/jquery-1.8.3.min.js"></script> <script src="../layui/layui.all.js"></script>html代码<input id="about" type="button" value="修改考勤" class="layui-btn layui-btn-normal" />主要js代码<script>$(input#about).on(click, function (...

Jquery弹出层ThickBox插件的使用详解【图】

相信大家说到thickbox都知道它是jQuery的一个插件，其作用是弹出对话框、网页框，使用户体验度更加愉悦，对于刚刚接触jQuery的小伙伴们对thickbox还不是很了解，那么我们今天就带大家了解下Jquery弹出层ThickBox插件的使用详解！准备工作：你需要三个文件：thickbox.js、thickbox.css、jquery.js，网上到处可下具体使用：第一步：将这三个文件引入到你要使用thickbox的页面代码如下:<script type="text/javascript" src="jquery.j...

Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享

这篇文章主要介绍了Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击。需要的朋友可以过来参考下，希望对大家有所帮助实例如下所示：<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title><script src="JS/jquery-1.9.1.js" type="text/ javascript "></script><script type="text/javascript">$( document ).ready(function () {var ps...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【jquery.artwl.thickbox.js 一个非常简单好用的jQuery弹出层插件】教程文章相关的互联网学习教程文章

jQuery点击空白关闭弹出层【代码】【图】

jquery实现点击按钮弹出层和点击空白处隐藏层

【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件【代码】

自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7【代码】

jquerymobile知识点三：弹出层popup【代码】【图】

nyroModal：强大的jQuery弹出层插件

Web前端设计模式制作漂亮的弹出层_jquery【图】

基于jquery的blockui插件显示弹出层

Jquery+CSS3实现一款简洁大气带滑动效果的弹出层【图】

jQuery实现的AJAX简单弹出层效果【图】

在实战项目中怎样使用jquerylayur弹出层

如何使用jquerylayui弹出层

jquerylayui弹出层使用详解

Jquery弹出层ThickBox插件的使用详解【图】

Jquery使用mouseenter和mouseleave事件实现鼠标经过弹出层且可以点击的示例代码分享

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程