JqueryのポップアップレイヤープラグインThickBoxの使い方は？

1年 ago
海斗, 葵
1 minute

ThickBoxというjQueryのポップアッププラグインを使用するには、次の手順に従う必要があります。

  1. 最初、jQueryライブラリファイルとThickBoxプラグインファイルをダウンロードして導入します。これらのファイルはThickBox公式ウェブサイト（https://jquery.com/）やGitHubからダウンロードできます。
  2. HTML文書に必要なHTML構造を追加してください。ポップアップを表示させるためのリンクと、隠れたポップアップコンテナを追加する必要があります。例えば：
<a href="#TB_inline?height=200&width=300&inlineId=myPopup" class="thickbox">Click to open popup</a>

<div id="myPopup" style="display:none;">
  <!-- 弹出层内容 -->
</div>

上記の例では、href属性は特別なThickBoxリンクであり、ポップアップのサイズとコンテンツのIDを指定します。inlineIdパラメータは表示するポップアップコンテナのIDを指定します。

  1. JavaScriptファイルで、ThickBoxプラグインを初期化するために次のコードを使用します。
$(document).ready(function() {
  $('.thickbox').click(function() {
    $.fn.thickbox({ closeText: 'Close', closeCallback: function() {
      console.log('Popup closed');
    }});
  });
});

上記のコードでは、.thickboxクラスセレクタがポップアップレイヤーをトリガーするリンクを選択します。 $.fn.thickbox()関数の呼び出しはポップアップレイヤーをデフォルト設定に設定します。 他のオプションを渡すことで、ポップアップレイヤーの動作や外観をカスタマイズすることもできます。

  1. 最後に、ThickBoxのスタイル定義がCSSファイルに含まれていることを確認してください。これらのスタイルはThickBoxプラグインファイル内に見つけることができます。

リンクをクリックすると、ThickBoxプラグインがポップアップウィンドウを表示し、あなたの設定に従って操作を行います。ポップアップウィンドウにカスタムコンテンツや機能を追加することができます。

bannerAds