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?</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>);
<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!
In these examples, we're using the shorthand function swal to call sweetAlert.
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?"</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>)
A warning message, with a function attached to the "Confirm"-button...
Ce qui précède est une explication détaillée de la façon dont le plug-in jquery SweetAlert implémente une boîte de dialogue réactive via le code. J'espère que cela vous sera utile.