jquery.artwl.thickbox.js 非常にシンプルで使いやすい jQuery ポップアップ レイヤー plug-in_jquery

最後の結果：

复制代码代码如下:

弹出层插件jquery.artwl.thickbox.js(http://www.jb51.net)

Artwl







プラグインの原理
すべてのポップアップ レイヤーの原理は似ています。つまり、全画面の半透明の DIV がマスク レイヤーとして使用され、このマスク レイヤー上にレイヤーが表示され、表示する内容、残りはCSSを使用します。
このプラグインは使いやすくするために、JS と CSS を JS ファイル (プラグイン) にカプセル化しているため、非常に使いやすく、1 行のコードで呼び出すことができます。
プラグインのソースコード
プラグイン (jquery.artwl.thickbox.js) のソースコードは次のとおりです:

コードをコピー コードは次のとおりです:

/* ファイル作成日: 2012 年 3 月 1 日 著者:artwl blog:http://artwl.cnblogs.com */
; (function ($) {
$.extend({
artwl_bind: function (options) {
options=$.extend({
showbtnid:"",
title:"",
content:""
},options);
var マスク = '

';
var boxcontain = '

タイトル

コンテンツ

'; h2, h3, h4, h5{マージン: 0px;パディング: 0px;}
#artwl_mask{背景色: #000;位置: 絶対;上: 0px;左: 0px;幅: 100%;高さ: 100 %;不透明度: 0.5;フィルター: アルファ (不透明度=50);表示: なし;}
#artwl_boxcontain{マージン: 0 自動;位置: 絶対;z インデックス: 2;行の高さ: 28px;表示: なし;}
#artwl_showbox{パディング : 10px;背景: #FFF;ボーダー半径: 5px;マージン: 20px;最小幅:300px;最小高さ:200px;}
#artwl_title{位置: 相対;高さ: 27px;border-bottom: 1px ソリッド #999;}
#artwl_close{position: 絶対;cursor: ポインタ;outline: none;top: 0;right: 0;z-index: 4;width: 42px;高さ: 42 ピクセル;オーバーフロー: 非表示;背景 -画像: url(/Images/フィードバッククローズ.png);_背景: なし;}
#artwl_message{パディング: 10px 0px;オーバーフロー: 非表示;行の高さ: 19 ピクセル; }';
if ($ ("#artwl_mask").length == 0) {
$("body").append(マスクボックスを含む);
$("head").append( "");
if(options.title!=""){
$("#artwl_title") (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) width = $(window).width() > 600 : $(window).width() - 40; "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(); Hide();
if(options.callback!=null){
options.callback()
}
}); 🎜>

呼び出し これも非常に簡単です。この JS ファイルをページに導入した後、ページ読み込みメソッドで次のコードを呼び出すだけです:
$.artwl_bind({ showbtnid: "btn_show", title) : "From Cnblogs Artwl", content: $(" #Content").html() });
これら 3 つのパラメーターは非常に単純で、最初はイベントをトリガーするポップアップ レイヤーの要素 ID です。 2 番目はポップアップ レイヤーのタイトル、3 番目はポップアップ レイヤーの内容です。
注意事項
使いやすさを考慮して、このプラグインは JS と CSS を 1 つのファイルに書き込みます。ポップアップレイヤーのスタイルを調整したい場合は、次のCSSを変更できます。
プラグイン CSS コード:

コードをコピー


コードは次のとおりです:

html, body, h1, h2, h3, h4, h5 {
margin: 0px;
パディング: 0px;
}
#artwl_mask {
背景 - カラー: #000;
位置: 絶対。
トップ: 0px;
左: 0px;
幅: 100%;
高さ: 100%;
不透明度: 0.5;
フィルター: アルファ(不透明度= 50);
表示: なし。
}
#artwl_boxcontain {
マージン: 0 自動;
位置: 絶対。
z - インデックス: 2;
行 - 高さ: 28px;
表示: なし。
}
#artwl_showbox {
パディング: 10px;
背景: #FFF;
境界線 - 半径: 5px;
マージン: 20px;
最小 - 幅: 300px;
最小 - 高さ: 200px;
}
#artwl_title {
位置: 相対;
高さ: 27px;
ボーダー - 下: 1px ソリッド #999;
}
# artwl_close {
位置: 絶対;
カーソル: ポインタ;
概要: なし。
トップ: 0;
右: 0;
z - インデックス: 4;
幅: 42px;
高さ: 42px;
オーバーフロー: 非表示;
背景 - 画像: url(/Images/フィードバック - close.png);
_背景: なし。
}
#artwl_message {
パディング: 10px 0px;
オーバーフロー: 非表示;
行 - 高さ: 19px;
}

また、针对IE6 は特殊な処理をサポートしていないため、IE6 では次のように表示されます。

IE6

その他浏览器

デモ下ダウンロード地址：http://xiazai.jb51.net/201203/yuanma/thickbox_demo.rar

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。