Bootstrapのアラートを閉じるには？

 

 

Bootstrap アラートを閉じる方法

この記事では、Bootstrap の JavaScript プラグインを使用してアラートボックスを閉じる方法について詳しく説明します。手動で閉じるボタンを追加する方法と、Bootstrap JavaScript コードを使用する方法の 2 つがあります。

方法 1: 閉じるボタンを使用してアラートを閉じる

  1. 閉じるボタンを追加する

    アラート <div> タグに閉じるボタンを追加し、以下の属性を指定します。

    • class="btn-close"：Bootstrap の閉じるボタンスタイルを適用します。
    • data-bs-dismiss="alert"：このボタンをクリックするとアラートが閉じるように Bootstrap に指示します。
    • aria-label="Close"：スクリーンリーダーにアクセシビリティを提供します。
    
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>成功！</strong> 操作は正常に完了しました。
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

  2. 必要なクラスを追加する

    • .alert-dismissible：アラートを閉じることができるようにします。
    • .fade .show：フェードイン・フェードアウト効果を追加します。

方法 2: JavaScript コードを使用してアラートを閉じる

  1. Bootstrap JavaScript を読み込む

    プロジェクトに Bootstrap の JavaScript ファイルが読み込まれていることを確認してください。

    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  2. アラート要素を取得する

    querySelector または他の方法を使用して、閉じるアラート要素を取得します。

  3. アラートインスタンスを作成する

    bootstrap.Alert.getOrCreateInstance(element) を使用してアラートインスタンスを作成します。ここで、element は取得したアラート要素です。

  4. close() メソッドを呼び出す

    アラートインスタンスで close() メソッドを呼び出してアラートを閉じます。

    
const alertElement = document.querySelector('.alert'); // アラート要素を取得
const alert = bootstrap.Alert.getOrCreateInstance(alertElement); // アラートインスタンスを作成
alert.close(); // アラートを閉じる

まとめ

上記の 2 つの方法のいずれかを使用して、Bootstrap アラートを簡単に閉じることができます。実際の状況に応じて、適切な方法を選択してください。

よくある質問

質問 回答
アラートが自動的に閉じないようにするにはどうすればよいですか？ .alert-dismissible クラスをアラート <div> から削除します。
閉じるボタンをカスタマイズするにはどうすればよいですか？ .btn-close クラスを独自のスタイルでオーバーライドするか、別のボタン要素を使用し、data-bs-dismiss="alert" 属性を追加します。
JavaScript を使用してアラートを表示するにはどうすればよいですか？ bootstrap.Alert.getOrCreateInstance(element).show() を使用します。ここで、element はアラート要素です。

参考文献

その他の参考記事:Bootstrap 警告する