Le plug-in jquery SweetAlert implémente les compétences d'invite réactive box_javascript

Le plug-in de couche contextuelle jquery prend en charge les invites de message, les invites d'erreur, les invites de boîte de confirmation, etc. L'expérience interactive est très bonne. Tout le monde utilise WeChat Pay, Alipay, etc. pour compléter l'expérience utilisateur. Ce plug-in doit prendre en charge au moins IE9. La méthode d'utilisation est également très simple et grossière, ce qui est conforme à la méthode d'utilisation populaire du plug-in jquery.

Laissez-moi d'abord vous montrer l'effet :

Aperçu en ligne Téléchargement du code source

Le code est le suivant :

<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

Show error message

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

  Try me!

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

• A title with a text under

  Try me!

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

  Try me!

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

  Try me!