Home>

Let me show you the effect:

code show as below:

<h1>sweet alert</h1>
<h2>a beautiful replacement for javascript "s" alert "</h2>
<button>download</button>
<h3>so ... what does it do?</h3>
<p>here "sa 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>
<h4>normal alert</h4>
<button>show error message</button>
<h5>code:</h5>
<pre><span>alert</span>(&span>"oops ... something went wrong!"</span>);
 </pre>
<div></div>
</div>
<div>
<h4>sweet alert</h4>
<button>show error message</button>
<h5>code:</h5>
<pre><span>sweetalert</span>(<span>"oops ..."</span> ;,<span>"something went wrong!"</span> ;,<span>"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>in these examples, we "re using the shorthand function<strong>swal</strong>to call sweetalert.</p>
<ul>
<li>
<div>
<p>a basic message</p>
<button>try me!</button>
</div>
<pre><span>swal</span>(<span>"here" s a message! "</span>)
</li>
<li>
<div>
<p>a title with a text under</p>
<button>try me!</button>
</div>
<pre><span>swal</span>(<span>"here" sa message! "</span> ;,<span"" it "s pretty, isn" t it?"<;/span>)</pre>
</li>
<li>
<div>
<p>a success message!</p>
<button>try me!</button>
</div>
<pre><span>swal</span>(<span>"good job!"</span> ;,<span>"you clicked the button!"</span> ;,<span>"success"</span>)</pre>
</li>
<li>
<div>
<p>a warning message, with a function attached to the "confirm" -button ...</p>
<button>try me!</button>
</div>
  • Previous Js simple method for dynamically increasing the number of input boxes by clicking a button in a form
  • Next jquery to achieve the secondary navigation slide down menu effect