Toast提示框
<p>点击按钮时,弹出提示框
<code>https://getbootstrap.com/docs/5.0/components/toasts/</code></p>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=93db680552735c87b1fd551d5f81b1a7&amp;file=file.png" alt="" /></p>
<pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-primary mt-5 mb-5 ms-5&quot; id=&quot;liveToastBtn&quot;&gt;Show live toast&lt;/button&gt;
&lt;div class=&quot;position-fixed bottom-0 end-0&quot;&gt;
&lt;div class=&quot;toast&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot; id=&quot;box&quot;&gt;
&lt;div class=&quot;toast-header&quot;&gt;
&lt;i class=&quot;bi bi-bell-fill&quot;&gt;&lt;/i&gt;
&lt;strong class=&quot;me-auto&quot;&gt;Bootstrap&lt;/strong&gt;
&lt;small&gt;11 mins ago&lt;/small&gt;
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;toast-body&quot;&gt;
Hello, world! This is a toast message.
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
var btn = document.getElementById(&quot;liveToastBtn&quot;);
var box = document.getElementById(&quot;box&quot;);
if(btn){
btn.addEventListener(&quot;click&quot;,function(){
new bootstrap.Toast(box).show();
})
}
&lt;/script&gt;</code></pre>