<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><span class="attr">alert</span>(<span class="str">"Oops... Something went wrong!"</span>); </pre><div class="vs-icon"></div></div><div class="showcase sweet"><h4>Sweet Alert</h4><button>Show error message</button><h5>Code:</h5><pre><span class="attr">sweetAlert</span>(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);</pre></div><p>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!</p><h3>More examples</h3><p class="center">In these examples, we're using the shorthand function <strong>swal</strong> to call sweetAlert.</p><ul class="examples"><li class="message"><div class="ui"><p>A basic message</p><button>Try me!</button></div><pre><span class="attr">swal</span>(<span class="str">"Here's a message!"</span>)</pre></li><li class="title-text"><div class="ui"><p>A title with a text under</p><button>Try me!</button></div><pre><span class="attr">swal</span>(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it?"</span>)</pre></li><li class="success"><div class="ui"><p>A success message!</p><button>Try me!</button></div><pre><span class="attr">swal</span>(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre></li><li class="warning confirm"><div class="ui"><p>A warning message, with a function attached to the "Confirm"-button...</p><button>Try me!</button></div>