首頁 > web前端 > js教程 > jquery SweetAlert外掛程式實作響應式提示框_javascript技巧

jquery SweetAlert外掛程式實作響應式提示框_javascript技巧

WBOY
發布: 2016-05-16 15:44:33
原創
1500 人瀏覽過

jquery彈出層插件,支援訊息提示、錯誤提示、確認框提示等。互動體驗度非常好,大家都用微信支付、支付寶等完成使用者體驗度非常的好。本插件至少要支援IE9 。使用方式也非常的簡單、粗暴,很符合大眾的jquery插件使用方法。

先給大家示範效果:

線上預覽    原始碼下載

程式碼如下:

1

2

3

4

5

6

7

8

9

10

<h1>Sweet Alert</h1>

<h2>A beautiful replacement for JavaScript's "Alert"</h2>

<button class="download">Download</button>

<h3>So... What does it do&#63;</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 class="brush:php;toolbar:false"><span class="attr">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);

Sweet Alert

Code:

1

<span class="attr">sweetAlert</span>(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);

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!

More examples

In these examples, we're using the shorthand function swal to call sweetAlert.

  • A basic message

    1

    <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>)

  • A title with a text under

    1

    <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it&#63;"</span>)

  • A success message!

    1

    <span class="attr">swal</span>(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)

  • A warning message, with a function attached to the "Confirm"-button...

    登入後複製

以上就是本文透過程式碼給大家詳解jquery SweetAlert外掛程式實現響應式提示框,希望對大家有幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板