Twitter Bootstrap Modal Close に関数をバインドする方法

Twitter Bootstrap Modal Close に関数をバインドする方法

Twitter Bootstrap Modal は、ダイアログボックスを表示するための便利なツールです。モーダルボックスを閉じた時に特定の処理を実行したい場合、hidden.bs.modal イベントに関数をバインドする必要があります。

方法:

以下の方法で、モーダルボックスの close ボタンにイベントハンドラ関数をバインドできます。

jQuery を使用:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      </div>
  </div>
</div>

$(function() {
  $('#myModal').on('hidden.bs.modal', function (e) {
    // モーダルが閉じられた時に実行したい処理
    alert('モーダルが閉じられました');
  });
});

コード解説:

• $('#myModal'): モーダル要素を取得
• .on('hidden.bs.modal', function (e)): hidden.bs.modal イベントにイベントハンドラ関数を登録
• alert('モーダルが閉じられました'): モーダルが閉じられた時にアラートを表示

JavaScript のネイティブコード:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      </div>
  </div>
</div>

const modal = document.getElementById('myModal');

modal.addEventListener('hidden.bs.modal', function(event) {
  // モーダルが閉じられた時に実行したい処理
  alert('モーダルが閉じられました');
});

• document.getElementById('myModal'): モーダル要素を取得

その他の方法:

• Bootstrap の modal イベントを使用

ポイント:

• hidden.bs.modal イベントは、モーダルボックスが完全に閉じられた後に発生します。
• イベントハンドラ関数内で、モーダルボックスの内容を操作したり、他の処理を実行することができます。

注意事項:

• モーダルボックスを閉じる方法は複数あります。
• どの方法でモーダルボックスを閉じたかに関係なく、hidden.bs.modal イベントは発生します。

HTML:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>モーダル本文</p>
      </div>
    </div>
  </div>
</div>

JavaScript:

$(function() {
  $('#myModal').on('hidden.bs.modal', function (e) {
    // モーダルボックスの内容をクリア
    $(this).find('.modal-body').empty();
  });
});

• $(this).find('.modal-body').empty(): モーダルボックスの .modal-body 要素内のすべてのコンテンツを削除

実行:

1. 上記のコードを HTML ファイルと JavaScript ファイルに保存します。
2. HTML ファイルを開きます。
3. モーダルボックスを開きます。

結果:

モーダルボックスが閉じると、モーダルボックス内のすべてのコンテンツが削除されます。

その他のサンプル:

• モーダルボックスが閉じられた時に、他のモーダルボックスを開く
• モーダルボックスが閉じられた時に、Ajax リクエストを送信

Twitter Bootstrap Modal Close に関数をバインドするその他の方法

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      </div>
  </div>
</div>

const modal = new bootstrap.Modal('#myModal');

modal.on('hide.bs.modal', function (event) {
  // モーダルが閉じられる前に実行したい処理
});

modal.on('hidden.bs.modal', function (event) {
  // モーダルが閉じられた後に実行したい処理
});

• new bootstrap.Modal('#myModal'): モーダル要素を初期化

jQuery の data() メソッドを使用:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      </div>
  </div>
</div>

$(function() {
  $('#myModal').data('onClose', function() {
    // モーダルが閉じられた時に実行したい処理
  });

  $('#myModal').on('hidden.bs.modal', function (e) {
    const onClose = $(this).data('onClose');
    if (onClose && typeof onClose === 'function') {
      onClose.call(this, e);
    }
  });
});

• $('#myModal').data('onClose', function() {}): モーダル要素に onClose という名前のデータ属性を設定
• onClose.call(this, e): onClose 関数を呼び出す

自作のイベントシステムを使用:

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      </div>
  </div>
</div>

const myModal = {
  onClose: [],
  close() {
    // モーダルを閉じる処理
    this.onClose.forEach(function(callback) {
      callback();
    });
  }
};

myModal.onClose.push(function() {
  // モーダルが閉じられた時に実行したい処理
});

$('#myModal').on('hidden.bs.modal', function (e) {
  myModal.close();
});

• myModal オブジェクトを作成
• myModal.onClose プロパティに、モーダルが閉じられた時に呼び出される関数の配列を格納
• myModal.close() メソッド: モーダルを閉じる処理
• myModal.onClose.push(function() {}): onClose プロパティに新しい関数を追加

どの方法を使用するかは、開発者の自由です。 上記のサンプルコードを参考に、自分のプロジェクトに合った方法を選択してください。