(编辑：jimmy 日期: 2026/1/27 浏览：2)
jquery弹出层插件，支持消息提示、错误提示、确认框提示等。交互体验度非常好，大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴，很符合大众的jquery插件使用方法。
先给大家演示效果：
在线预览 源码下载
代码如下：
<h1>Sweet Alert</h1> <h2>A beautiful replacement for JavaScript's "Alert"</h2> <button class="download">Download</button> <h3>So... What does it do"showcase normal"> <h4>Normal alert</h4> <button>Show error message</button> <h5>Code:</h5> <pre><span class="attr">alert</span>(<span class="str">"Oops... Something went wrong!"</span>); </pre> <div class="vs-icon"></div> </div> <div class="showcase sweet"> <h4>Sweet Alert</h4> <button>Show error message</button> <h5>Code:</h5> <pre><span class="attr">sweetAlert</span>(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);</pre> </div> <p>Pretty cool huh"center">In these examples, we're using the shorthand function <strong>swal</strong> to call sweetAlert.</p> <ul class="examples"> <li class="message"> <div class="ui"> <p>A basic message</p> <button>Try me!</button> </div> <pre><span class="attr">swal</span>(<span class="str">"Here's a message!"</span>)</pre> </li> <li class="title-text"> <div class="ui"> <p>A title with a text under</p> <button>Try me!</button> </div> <pre><span class="attr">swal</span>(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it"</span>)</pre> </li> <li class="success"> <div class="ui"> <p>A success message!</p> <button>Try me!</button> </div> <pre><span class="attr">swal</span>(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre> </li> <li class="warning confirm"> <div class="ui"> <p>A warning message, with a function attached to the "Confirm"-button...</p> <button>Try me!</button> </div>
以上就是本文通过代码给大家详解jquery SweetAlert插件实现响应式提示框，希望对大家有所帮助。