技术笔记

编程 营销 外贸


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;amp;file=file.png" alt="" /></p> <pre><code>&amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;btn btn-primary mt-5 mb-5 ms-5&amp;quot; id=&amp;quot;liveToastBtn&amp;quot;&amp;gt;Show live toast&amp;lt;/button&amp;gt; &amp;lt;div class=&amp;quot;position-fixed bottom-0 end-0&amp;quot;&amp;gt;         &amp;lt;div class=&amp;quot;toast&amp;quot; role=&amp;quot;alert&amp;quot; aria-live=&amp;quot;assertive&amp;quot; aria-atomic=&amp;quot;true&amp;quot; id=&amp;quot;box&amp;quot;&amp;gt;             &amp;lt;div class=&amp;quot;toast-header&amp;quot;&amp;gt;               &amp;lt;i class=&amp;quot;bi bi-bell-fill&amp;quot;&amp;gt;&amp;lt;/i&amp;gt;               &amp;lt;strong class=&amp;quot;me-auto&amp;quot;&amp;gt;Bootstrap&amp;lt;/strong&amp;gt;               &amp;lt;small&amp;gt;11 mins ago&amp;lt;/small&amp;gt;               &amp;lt;button type=&amp;quot;button&amp;quot; class=&amp;quot;btn-close&amp;quot; data-bs-dismiss=&amp;quot;toast&amp;quot; aria-label=&amp;quot;Close&amp;quot;&amp;gt;&amp;lt;/button&amp;gt;             &amp;lt;/div&amp;gt;             &amp;lt;div class=&amp;quot;toast-body&amp;quot;&amp;gt;               Hello, world! This is a toast message.             &amp;lt;/div&amp;gt;           &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;script&amp;gt;     var btn = document.getElementById(&amp;quot;liveToastBtn&amp;quot;);     var box = document.getElementById(&amp;quot;box&amp;quot;);     if(btn){         btn.addEventListener(&amp;quot;click&amp;quot;,function(){             new bootstrap.Toast(box).show();                     })     }   &amp;lt;/script&amp;gt;</code></pre>

页面列表

ITEM_HTML