jquery SweetAlert插件實現(xiàn)響應(yīng)式提示框

更新時間：2015年08月18日 14:20:31 作者：拎壺充

為了滿足用戶體驗度，使用SweetAlert插件實現(xiàn)響應(yīng)式提示框效果非常好，下面通過這篇文章給大家介紹jquery SweetAlert插件實現(xiàn)響應(yīng)式提示框，需要的朋友可以參考下

jquery彈出層插件，支持消息提示、錯誤提示、確認(rèn)框提示等。交互體驗度非常好，大家都用微信支付、支付寶等完成用戶體驗度非常的不錯。本插件至少要支持IE9+。使用方式也非常的簡單、粗暴，很符合大眾的jquery插件使用方法。

先給大家演示效果：

在線預(yù)覽源碼下載

代碼如下：

<h1>Sweet Alert</h1>
<h2>A beautiful replacement for JavaScript's "Alert"</h2>
<button class="download">Download</button>
<h3>So... What does it do?</h3>
<p>Here's a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
<div class="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? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
<h3>More examples</h3>
<p class="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插件實現(xiàn)響應(yīng)式提示框，希望對大家有所幫助。

您可能感興趣的文章: