BootstrapモーダルとjQuery UIの融合：アニメーションとインタラクションを実現

2024-05-23

Bootstrapモーダル開閉時に関数を呼び出す方法（JavaScript、jQuery、jQuery UI）

必要なもの

Bootstrap
jQuery（オプション）

方法

モーダルを開閉するイベントを定義する

以下のコードは、モーダルが開閉されたときに呼び出されるイベントハンドラを定義します。

$('#myModal').on('show.bs.modal', function (e) {
  // モーダルが開いたときに実行する処理
  console.log("モーダルが開きました。");
})

$('#myModal').on('hidden.bs.modal', function (e) {
  // モーダルが閉じられたときに実行する処理
  console.log("モーダルが閉じられました。");
})

処理を記述する

上記コードの// モーダルが開いたときに実行する処理と// モーダルが閉じられたときに実行する処理の部分に、必要な処理を記述します。

例：

$('#myModal').on('show.bs.modal', function (e) {
  // フォーム内のデータを取得する
  var data = $('#myModal form').serialize();

  // データをサーバーに送信する
  $.ajax({
    url: '/submit_data.php',
    type: 'POST',
    data: data,
    success: function(response) {
      console.log(response);
    }
  });
})

jQueryとjQuery UIの使用

上記の方法で、基本的な処理を実行することができます。より複雑な処理を実行したい場合は、jQueryやjQuery UIを使用することができます。

jQueryを使用すると、DOM操作やAjax通信などをより簡単に実行することができます。

jQuery UIを使用すると、モーダルにアニメーションやインタラクティブな要素を追加することができます。

上記のコードはあくまで一例です。必要に応じて変更してください。

補足

Bootstrap 5では、イベント名が変更されています。以下に、Bootstrap 4とBootstrap 5のイベント名の対応表を示します。

Bootstrap 4	Bootstrap 5
`show.bs.modal`	`show.bs-modal`
`shown.bs.modal`	`shown.bs-modal`
`hide.bs.modal`	`hide.bs-modal`
`hidden.bs.modal`	`hidden.bs-modal`

上記のコードは、jQuery 3.x以降とBootstrap 4以降で使用できます。古いバージョンのjQueryやBootstrapを使用している場合は、コードを適宜変更する必要があります。

Bootstrapモーダル開閉時に関数を呼び出す：サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrapモーダルサンプル</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">モーダルを開く</button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">モーダルタイトル</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ... モーダルコンテンツ ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    $(function() {
      $('#myModal').on('show.bs.modal', function (e) {
        console.log("モーダルが開きました。");
      });

      $('#myModal').on('hidden.bs.modal', function (e) {
        console.log("モーダルが閉じられました。");
      });
    });
  </script>
</body>
</html>

このコードを実行すると、以下のようになります。

モーダルボタンをクリックすると、モーダルが表示されます。
モーダルが表示されると、コンソールに「モーダルが開きました。」というメッセージが出力されます。

補足

モーダルにコンテンツを追加したり、ボタンの動作を変更したりすることができます。
jQueryとBootstrapに関する詳細については、それぞれの公式ドキュメントを参照してください。

Bootstrapモーダル開閉時に関数を呼び出す：その他の方法

1. data- 属性を使用する*

Bootstrapモーダルには、data-*属性を使用して、イベントハンドラを指定することができます。以下に、data-showとdata-hide属性を使用して、モーダルが開閉されたときに関数を呼び出す例を示します。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-show="openModal" data-hide="closeModal">モーダルを開く</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  </div>

JavaScript

function openModal() {
  console.log("モーダルが開きました。");
}

function closeModal() {
  console.log("モーダルが閉じられました。");
}

<button type="button" class="btn btn-primary" id="openModalButton">モーダルを開く</button>

<div id="myModal" style="display: none;">
  </div>

$(function() {
  $( "#myModal" ).dialog({
    autoOpen: false,
    show: function( event ) {
      console.log("モーダルが開きました。");
    },
    hide: function( event ) {
      console.log("モーダルが閉じられました。");
    }
  });

  $( "#openModalButton" ).click(function() {
    $( "#myModal" ).dialog( "open" );
  });
});

カスタムイベントを使用して、モーダル開閉時に関数を呼び出すこともできます。

<button type="button" class="btn btn-primary" id="openModalButton">モーダルを開く</button>

<div id="myModal" style="display: none;">
  </div>

$(function() {
  $(document).on('modal-open', function() {
    console.log("モーダルが開きました。");
  });

  $(document).on('modal-close', function() {
    console.log("モーダルが閉じられました。");
  });

  $( "#openModalButton" ).click(function() {
    $( "#myModal" ).trigger('modal-open');
    $( "#myModal" ).modal('show');
  });

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