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(http://www.jb51.net)</h3>
<input type="button" value="Click Me" id="btn_show" />
<span id="Content" style="display:none;">
<a href="http://www.jb51.net">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

赞 (0)

相关推荐

  • jQuery弹出层插件Lightbox_me使用指南

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能 用于显示弹出层 2.Ligh

  • jQuery弹出层插件简化版代码下载

    复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){  return this.replace(new RegExp(s1,"gm"),s2);  }; (function($){  /*  * $-layer 0.1 - New Wave Javascript  *  * Copyright (c) 2008 King Wong * $Date: 2008-10-09 $ */ var ___id___ = "&

  • jQuery boxy弹出层插件中文演示及使用讲解

    使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • jQuery弹出层插件popShow用法示例

    jQuery弹出层插件popShow用法示例

    本文实例讲述了jQuery弹出层插件popShow用法.分享给大家供大家参考,具体如下: popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <script src="/js/common/jquery.min.js" type="text/javascript

  • Jquery弹出层插件ThickBox的使用方法

    Jquery弹出层插件ThickBox的使用方法

    thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法. 声明一下:这只是个人的总结记载而已. 准备工作:你需要三个文件:thickbox.js.thickbox.css.jquery.js,网上到处可下 具体使用: 第一步:将这三个文件引入到你要使用thickbox的页面 复制代码 代码如下: <script type="text/javascript" src="jquery.js">

  • Jquery 弹出层插件实现代码

    直接看代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layer.aspx.cs" Inherits="Layer" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

  • js弹出层(jQuery插件形式附带reLoad功能)

    js弹出层(jQuery插件形式附带reLoad功能)

    之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下: 复制代码 代码如下: (function($){ $.module={ _showCoverLayer:function(){//显示遮盖层 this.coverLayer=$("#TB_overlay"); var height=$(document).height()+"px"; var width

  • Jquery实现弹出层分享微博插件具备动画效果

    Jquery实现弹出层分享微博插件具备动画效果

    此Jquery插件是一款非常实用的特效,是很多网站不可缺少的推广神兵利器,传统的一般都用百度.加网的分享插件,但样式外观都不怎么好看,用户体验效果差一点,此作品不但有分享功能,还具备了动画效果,提高了用户体验.由于用了CSS3,为了可以看到插件的最佳效果,建议大家使用谷歌.火狐等浏览器... 作品包括以下功能: 1.弹出层 2.遮罩层 3.动画效果 4.CSS3 效果如下: 源码下载 代码片段(1) 复制代码 代码如下: $(document).ready(function(e) { var s

  • JQUERY THICKBOX弹出层插件

    .THICKBOX支持一下浏览器: Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10--但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用: 1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少! 复制代码

  • jQuery插件zoom实现图片全屏放大弹出层特效

    jQuery插件zoom实现图片全屏放大弹出层特效

    1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

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

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

  • 一个jquery的弹出层的插件第1/2页

    复制代码 代码如下: String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); }; (function($){ /* * $-layer 0.1 - jquery pulg-in * * Copyright (c) 2008 King Wong * $Date: 2008-09-28 $ */ var ___win___ = window.self; var

  • jQuery弹出层插件popShow(改进版)用法示例

    jQuery弹出层插件popShow(改进版)用法示例

    本文实例讲述了jQuery弹出层插件popShow(改进版)用法.分享给大家供大家参考,具体如下: 前面一篇<jQuery弹出层插件popShow用法示例>分析了popShow插件的基本用法,这里再对插件进行一番改进. popShow弹出层 图1.1 弹出层效果 1.引入JS和CSS文件 <link href="popShow.css" rel="stylesheet" type="text/css" /> <scr

随机推荐