初心者向け: hide() メソッドで簡単操作

2024-04-15

JavaScript で Bootstrap モーダルを非表示にする方法

hide() メソッドを使用する

これは、Bootstrap によって提供される最も簡単な方法です。以下のコード例のように、モーダルインスタンスに対して hide() メソッドを呼び出すだけです。

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

jQuery を使用している場合は、以下のコード例のように $('#myModal').modal('hide') を使用してモーダルを非表示にすることができます。

$('#myModal').modal('hide');

イベントハンドラを使用する

モーダルが閉じられたときに何かアクションを実行したい場合は、イベントハンドラを使用することができます。以下のコード例は、モーダルが閉じられたときにコンソールにログを出力する例です。

const myModal = new bootstrap.Modal('#myModal');
myModal.hide.addEventListener('hidden.bs-modal', () => {
  console.log('Modal is hidden');
});

data-dismiss 属性を使用する

Bootstrap 4 では、data-dismiss="modal" 属性を使用してモーダルを閉じることもできます。以下のコード例は、ボタンをクリックするとモーダルが閉じられるようにする例です。

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

補足

上記のコード例は、Bootstrap 5 を使用していることを前提としています。 Bootstrap 4 を使用している場合は、メソッド名やセレクタが異なる場合があります。
モーダルを完全に削除するには、remove() メソッドを使用する必要があります。

上記以外にも、モーダルを非表示にする方法はいくつかあります。ご自身のニーズに合った方法を選択してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap モーダルを非表示にする</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-X++OY24/b4L2y39/zCYzR4q240z3k1q44AP662vTH9XzO05y5yICw6kQ/z5/pY78" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
      モーダルを開く
    </button>

    <div class="modal fade" id="myModal" tabindex="-1" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ... モーダルコンテンツ ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      const myModal = new bootstrap.Modal('#myModal');

      // 1. `hide()` メソッドを使用する
      document.getElementById('hideModalButton').addEventListener('click', () => {
        myModal.hide();
      });
    </script>
  </div>
</body>
</html>

このコードでは、モーダルを開くボタン、モーダル自体、モーダルを非表示にするためのボタンが用意されています。 hideModalButton がクリックされると、hide() メソッドが呼び出され、モーダルが非表示になります。

jQuery を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap モーダルを非表示にする</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-X++OY24/b4L2y39/zCYzR4q240z3k1q44AP662vTH9XzO05y5yICw6kQ/z5/pY78" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-Ka7Qz5q4aX+YkQkAU74g2y41wL8o4q99ku9x8g5o25WRnW8qYz5m40w+cQ6z2Y" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">

JavaScript で Bootstrap モーダルを非表示にするその他の方法

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>

$('#myModal').on('hidden.bs-modal', function () {
  console.log('Modal is hidden');
});

show.bs-modal イベントをキャンセルする

この方法は、モーダルが開かれる前にそれをキャンセルしたい場合に有効です。以下のコード例は、ボタンをクリックすると show.bs-modal イベントがキャンセルされ、モーダルが開かなくなる例です。

$('#openMyModalButton').on('click', function (event) {
  if (shouldCancelModal) {
    event.preventDefault();
    event.stopPropagation();
  }
});

CSS を使用する

この方法は、モーダルを非表示にするのではなく、視覚的に隠すだけです。以下の CSS コードは、モーダルに display: none プロパティを設定して非表示にします。

#myModal {
  display: none;
}

ローカルストレージを使用する

この方法は、ユーザーが以前にモーダルを閉じたことを記憶させたい場合に有効です。以下のコード例は、ユーザーがモーダルを閉じると closed というキーに true をローカルストレージに保存し、ユーザーがページを再読み込みしたときにモーダルを自動的に非表示にする例です。

$('#myModal').on('hidden.bs-modal', function () {
  localStorage.setItem('closed', true);
});

$(document).ready(function () {
  if (localStorage.getItem('closed')) {
    $('#myModal').hide();
  }
});