jquery SweetAlert プラグインは応答性の高いプロンプトを実装します box

jquery SweetAlert プラグインは応答性の高いプロンプトを実装します box_javascript スキル

WBOY

リリース： 2016-05-16 15:44:33

オリジナル

1467 人が閲覧しました

jquery ポップアップレイヤープラグインは、メッセージプロンプト、エラープロンプト、確認ボックスプロンプトなどをサポートします。インタラクティブなエクスペリエンスは非常に優れており、誰もが WeChat Pay、Alipay などを使用してユーザーエクスペリエンスを完成させています。このプラグインは少なくとも 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&#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:

<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

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

A title with a text under

<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!

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