<p>Here's a comparison of a standard error message. The first one uses the built-in<strong>alert</strong>-function, whilethe 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?"</span>)