Bootstrap 5のModalを閉じるには？

 

Bootstrap 5 で Modal を閉じる方法

この記事では、Bootstrap 5 で Modal を閉じるさまざまな方法について詳しく説明します。背景のクリック、閉じるボタンのクリック、JavaScript コードの使用など、さまざまな方法について説明し、コード例を示します。

一、Bootstrap Modal クローズメカニズムの概要

Bootstrap Modal は、重要な情報を表示したり、ユーザーを特定のアクションに誘導したりするために使用される、HTML、CSS、JavaScript を使用して構築されたポップアップウィンドウです。ページの他のすべてのコンテンツの上に重ねて表示され、ページのスクロールを禁止します。

Bootstrap Modal は、ユーザーが柔軟に制御できるように、さまざまなクローズ方法を提供しています。

  • Modal 背景のクリック: デフォルトでは、Modal 背景領域をクリックすると、Modal は自動的に閉じます。
  • 閉じるボタンのクリック: Modal には通常、閉じるボタン (x) または「閉じる」ボタンがあり、クリックすると Modal を閉じることができます。
  • JavaScript コードの使用: JavaScript コードを使用して、Modal インスタンスの .hide() メソッドを呼び出すことで、Modal を閉じることができます。

二、Modal 閉じるボタンの使用

Modal の HTML 構造には、通常、data-bs-dismiss="modal" 属性を持つボタンが含まれています。例:


<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

この属性は、このボタンをクリックすると、関連付けられた Modal を閉じるように Bootstrap に指示します。

三、JavaScript を使用した Modal のクローズ

次の JavaScript コードを使用して、Modal を閉じることができます。

  1. Modal インスタンスの取得: Modal.getInstance() メソッドを使用して、Modal インスタンスを取得します。

<script>
var myModal = document.getElementById('myModal');
var modal = bootstrap.Modal.getInstance(myModal); 
</script>
  1. .hide() メソッドの呼び出し: Modal インスタンスで .hide() メソッドを呼び出します。

<script>
modal.hide();
</script>

たとえば、このコードをボタンのクリックイベントに追加して、ボタンをクリックしたときに Modal を閉じることができます。


<script>
document.getElementById('closeModalButton').addEventListener('click', function() {
    var myModal = document.getElementById('myModal');
    var modal = bootstrap.Modal.getInstance(myModal); 
    modal.hide();
});
</script>

四、Modal 背景のクリックによるクローズの無効化

Modal 背景領域をクリックして Modal を閉じるのを禁止する場合は、Modal オプションで backdrop: 'static' を設定します。


<script>
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
    backdrop: 'static'
});
myModal.show();
</script>

注: Modal 背景のクリックによるクローズを無効にした場合、ユーザーは閉じるボタンまたは JavaScript コードを使用してのみ Modal を閉じることができます。

関連する質問と回答

  1. 質問: data-bs-dismiss 属性を使用せずに Modal を閉じることはできますか？

    回答: はい、JavaScript を使用して Modal.hide() メソッドを呼び出すことで Modal を閉じることができます。

  2. 質問: Modal のクローズアニメーションを無効にすることはできますか？

    回答: はい、Modal オプションで animation: false を設定することでクローズアニメーションを無効にすることができます。

  3. 質問: Modal が閉じた後に特定のイベントをトリガーするにはどうすればよいですか？

    回答: Modal の hidden.bs.modal イベントをリッスンすることで、Modal が閉じた後に JavaScript コードを実行できます。

その他の参考記事:Bootstrap ページタイトル