Q&A
なんのために必要な機能なのでしょうか。
やり方次第ではモーダルとスピナーで済みそうに思うのですが。
Google Chrome画面下部にHTML, javascriptでポップアップでステータスバーを表示したいです。
BootStrap5環境下ですが、Bootstrapにはそのような機能はないようです。
表示した後はフェードアウトで消えるか、☓ボタンで閉じるかのどちらかを取りたいと思っています。(Bootstrap5でこの機能はありましたが、ポップアップのものでなかったので使えないかもしれません。)
ライブラリ等があればいいのですが、見つけられませんでした。
どのような方法が考えれますでしょうか？
何か良い方法があれば教えて下さい。
(追記)jqueryの利用は避けたいです。
よろしくお願いします。
回答1件
0
ベストアンサー
トーストのことですか？
投稿2022/01/31 01:03
総合スコア36115
コメントありがとうございます。
トーストに気づきませんでした。画面下部には出なくてもよいのですが、やりたいことにかなり近いかもしれません。いまから実装してみます。
Toastを実行することができました。ありがとうございます。
Toastを右上に表示したいのですが、top-0 end-0でうまく表示してくれなく、困ってます。
// html
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative">
<div class="toast-container position-absolute p-3 top-0 end-0">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Message</strong>
<small>just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<span color="green">Success.</span>
</div>
</div>
</div>
</div>
// javascript
new bootstrap.Toast(document.getElementById("toast")).show();
position-relative としているからではないですか？
ご指摘ありがとうございます。position-relative を削除することで右上に表示できるようになりました。
公式サイトのサンプルは見本なので注意しないといけないですね。
positionの使い方をよく考える必要がありますね。
// html
<div aria-live="polite" aria-atomic="true">
<div id="toast" class="toast-container position-absolute p-3 top-0 end-0">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Message</strong>
<small>just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
<span style="color: green!important;">Success.</span>
</div>
</div>
</div>
</div>
// javascript
new bootstrap.Toast(document.getElementById("toast")).show();
削除
削除
あなたの回答
tips
プレビュー
