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

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

WBOY

リリース： 2016-05-16 17:55:36

オリジナル

991 人が閲覧しました

最後の結果：

复制代码代码如下:

弹出层插件:jquery.artwl.thickbox.js

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

プラグインの原理
すべてのポップアップレイヤーの原理は似ています。つまり、全画面の半透明の 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; 
} 