seimin
/
itsm-whlg


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
							<!doctype html>

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title>SweetAlert</title>
  
  <link rel="stylesheet" href="./example.css">

  <!-- This is what you need -->
  <script src="../lib/sweet-alert.min.js"></script>
  <link rel="stylesheet" href="../lib/sweet-alert.css">
  <!--.......................-->

</head>

<body>

<h1>Sweet Alert</h1>
<h2>A beautiful replacement for Javascript's "Alert"</h2>
<button class="download">Download</button>

<!-- What does it do? -->
<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="func">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>sweetAlert(<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>


<!-- Examples -->
<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>swal(<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>swal(<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>swal(<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>
		<pre>swal({
&nbsp;&nbsp;title: <span class="str">"Are you sure?"</span>,
&nbsp;&nbsp;text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
&nbsp;&nbsp;type: <span class="str">"warning"</span>,
&nbsp;&nbsp;showCancelButton: <span class="val">true</span>,
&nbsp;&nbsp;confirmButtonColor: <span class="str">"#DD6B55"</span>,
&nbsp;&nbsp;confirmButtonText: <span class="str">"Yes, delete it!"</span>,
&nbsp;&nbsp;closeOnConfirm: <span class="val">false</span>
},
<span class="func"><i>function</i></span>(){
&nbsp;&nbsp;<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
});</pre>
	</li>

	<li class="warning cancel">
		<div class="ui">
			<p>... and by passing a parameter, you can execute something else for "Cancel".</p>
			<button>Try me!</button>
		</div>
		<pre>swal({
&nbsp;&nbsp;title: <span class="str">"Are you sure?"</span>,
&nbsp;&nbsp;text: <span class="str">"You will not be able to recover this imaginary file!"</span>,
&nbsp;&nbsp;type: <span class="str">"warning"</span>,
&nbsp;&nbsp;showCancelButton: <span class="val">true</span>,
&nbsp;&nbsp;confirmButtonColor: <span class="str">"#DD6B55"</span>,
&nbsp;&nbsp;confirmButtonText: <span class="str">"Yes, delete it!"</span>,
&nbsp;&nbsp;cancelButtonText: <span class="str">"No, cancel plx!"</span>,
&nbsp;&nbsp;closeOnConfirm: <span class="val">false</span>,
&nbsp;&nbsp;closeOnCancel: <span class="val">false</span>
},
<span class="func"><i>function</i></span>(isConfirm){
&nbsp;&nbsp;<span class="tag">if</span> (isConfirm) {
&nbsp;&nbsp;&nbsp;&nbsp;<span class="func">swal</span>(<span class="str">"Deleted!"</span>, <span class="str">"Your imaginary file has been deleted."</span>, <span class="str">"success"</span>);
&nbsp;&nbsp;} <span class="tag">else</span> {
	&nbsp;&nbsp;&nbsp;&nbsp;<span class="func">swal</span>(<span class="str">"Cancelled"</span>, <span class="str">"Your imaginary file is safe :)"</span>, <span class="str">"error"</span>);
&nbsp;&nbsp;}
});</pre>
	</li>

	<li class="custom-icon">
		<div class="ui">
			<p>A message with a custom icon</p>
			<button>Try me!</button>
		</div>
		<pre>swal({
&nbsp;&nbsp;title: <span class="str">"Sweet!"</span>,
&nbsp;&nbsp;text: <span class="str">"Here's a custom image."</span>,
&nbsp;&nbsp;imageUrl: <span class="str">"images/thumbs-up.jpg"</span>
});</pre>
	</li>

	<li class="message-html">
		<div class="ui">
			<p>An HTML message</p>
			<button>Try me!</button>
		</div>
		<pre>swal({
&nbsp;&nbsp;title: <span class="str">"HTML &lt;small&gt;Title&lt;/small&gt;!"</span>,
&nbsp;&nbsp;text: <span class="str">"A custom &lt;span style="color:#F8BB86"&gt;html&lt;span&gt; message."</span>,
&nbsp;&nbsp;html: <span class="str">true</span>
});</pre>
	</li>

	<li class="timer">
		<div class="ui">
			<p>A message with auto close timer</p>
			<button>Try me!</button>
		</div>
		<pre>swal({
&nbsp;&nbsp;title: <span class="str">"Auto close alert!"</span>,
&nbsp;&nbsp;text: <span class="str">"I will close in 2 seconds."</span>,
&nbsp;&nbsp;timer: <span class="str">2000</span>,
&nbsp;&nbsp;showConfirmButton: <span class="str">false</span>
});</pre>
	</li>

</ul>


<!-- Download & Install -->
<h3 id="download-section">Download & install</h3>

<div class="center-container">
	<p class="center"><b>Method 1:</b> Install through bower:</p>
	<pre class="center">$ bower install sweetalert</pre>
</div>

<p class="center"><b>Method 2:</b> Download the sweetAlert <strong>CSS</strong> and <strong>JavaScript</strong> files.</p>

<a class="button" href="https://github.com/t4t5/sweetalert/archive/master.zip" download>Download files</a>

<ol>
	<li>
		<p>Initialize the plugin by referencing the necessary files:</p>
		<pre>&lt;<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"lib/sweet-alert.min.js"</span>&gt;&lt;/<span class="tag">script</span>&gt;
&lt;<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"lib/sweet-alert.css"</span>&gt;</pre>
	</li>

	<li>
		<p>Call the sweetAlert-function after the page has loaded</p>
		<pre>swal({
&nbsp;&nbsp;title: <span class="str">"Error!"</span>,
&nbsp;&nbsp;text: <span class="str">"Here's my error message!"</span>,
&nbsp;&nbsp;type: <span class="str">"error"</span>,
&nbsp;&nbsp;confirmButtonText: <span class="str">"Cool"</span>
});
</pre>
	</li>
</ol>


<!-- Configuration -->
<h3>Configuration</h3>

<p class="center">Here are the keys that you can use if you pass an object into sweetAlert:</p>

<table>
	<tr class="titles">
		<th>
			<div class="border-left"></div>
			Argument
		</th>
		<th>Default value</th>
		<th>
			<div class="border-right"></div>
			Description
		</th>
	</tr>
	<tr>
		<td><b>title</b></td>
		<td><i>null (required)</i></td>
		<td>The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.</td>
	</tr>
	<tr>
		<td><b>text</b></td>
		<td><i>null</i></td>
		<td>A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.</td>
	</tr>
	<tr>
		<td><b>type</b></td>
		<td><i>null</i></td>
		<td>The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "<strong>warning</strong>", "<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>. It can either be put in the array under the key "type" or passed as the third parameter of the function.</td>
	</tr>
        <tr>
                <td><b>allowEscapeKey</b></td>
                <td><i>true</i></td>
                <td>If set to <strong>true</strong>, the user can dismiss the modal by pressing the Escape key.</td>
        </tr>
	<tr>
		<td><b>customClass</b></td>
		<td><i>null</i></td>
		<td>A custom CSS class for the modal. It can be added to the object under the key "customClass".</td>
	</tr>
	<tr>
		<td><b>allowOutsideClick</b></td>
		<td><i>false</i></td>
		<td>If set to <strong>true</strong>, the user can dismiss the modal by clicking outside it.</td>
	</tr>
	<tr>
		<td><b>showCancelButton</b></td>
		<td><i>false</i></td>
		<td>If set to <strong>true</strong>, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.</td>
	</tr>
	<tr>
		<td><b>showConfirmButton</b></td>
		<td><i>true</i></td>
		<td>If set to <strong>false</strong>, the "OK/Confirm"-button will be hidden. Make sure you set a timer or set allowOutsideClick to true when using this, in order not to annoy the user.</td>
	</tr>
	<tr>
		<td><b>confirmButtonText</b></td>
		<td><i>"OK"</i></td>
		<td>Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".</td>
	</tr>
	<tr>
		<td><b>confirmButtonColor</b></td>
		<td><i>"#AEDEF4"</i></td>
		<td>Use this to change the background color of the "Confirm"-button (must be a HEX value).</td>
	</tr>
	<tr>
		<td><b>cancelButtonText</b></td>
		<td><i>"Cancel"</i></td>
		<td>Use this to change the text on the "Cancel"-button.</td>
	</tr>
	<tr>
		<td><b>closeOnConfirm</b></td>
		<td><i>true</i></td>
		<td>Set to <i>false</i> if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert.</td>
	</tr>
	<tr>
		<td><b>imageUrl</b></td>
		<td><i>null</i></td>
		<td>Add a customized icon for the modal. Should contain a string with the path to the image.</td>
	</tr>
	<tr>
		<td><b>imageSize</b></td>
		<td><i>"80x80"</i></td>
		<td>If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height.</td>
	</tr>
	<tr>
		<td><b>timer</b></td>
		<td><i>null</i></td>
		<td>Auto close timer of the modal. Set in ms (milliseconds).</td>
	</tr>
	<tr>
		<td><b>html</b></td>
		<td><i>false</i></td>
		<td>If set to true, will not escape title and text parameters. (Set to false if you're worried about XSS attacks.)</td>
	</tr>
	<tr>
		<td><b>animation</b></td>
		<td><i>true</i></td>
		<td>If set to <strong>false</strong>, the modal's animation will be disabled.</td>
	</tr>
</table>


<!-- Methods -->
<h3>Methods</h3>

<p class="center">SweetAlert also comes with some simple methods that you can call:</p>

<table>
	<tr class="titles">
		<th>
			<div class="border-left"></div>
			Function
		</th>
		<th>Example</th>
		<th>
			<div class="border-right"></div>
			Description
		</th>
	</tr>
	<tr>
		<td>setDefaults</td>
		<td><i>swal.setDefaults({ confirmButtonColor: '#0000' });</i></td>
		<td>If you end up using a lot of the same settings when calling SweetAlert, you can use setDefaults at the start of your program to set them once and for all!</td>
	</tr>
	<tr>
		<td>close</td>
		<td><i>swal.close();</i></td>
		<td>Close the currently open SweetAlert programatically.</td>
	</tr>
</table>


<!-- Contribute -->
<h3>Contribute</h3>
<p>SweetAlert was created by <a href="http://tristanedwards.me" target="_blank">Tristan Edwards</a>, you can follow him on <a href="https://twitter.com/t4t5" target="_blank" class="twitter">Twitter</a> or <a href="https://dribbble.com/tristanedwards" target="_blank" class="dribbble">Dribbble</a> for updates and other cool projects!</p>
<p>Feel free to fork sweetAlert on <a href="https://github.com/t4t5/sweetalert" class="github">GitHub</a> if you have any features that you want to add!</p>


<footer>
	<span class="te-logo">TE</span> • <script>document.write(new Date().getFullYear())</script>
</footer>


<script>

document.querySelector('button.download').onclick = function(){
	$("html, body").animate({ scrollTop: $("#download-section").offset().top }, 1000);
};

document.querySelector('.showcase.normal button').onclick = function(){
	alert("Oops... Something went wrong!");
};

document.querySelector('.showcase.sweet button').onclick = function(){
	swal("Oops...", "Something went wrong!", "error");
};

document.querySelector('ul.examples li.message button').onclick = function(){
	swal("Here's a message!");
};

document.querySelector('ul.examples li.timer button').onclick = function(){
	swal({
		title: "Auto close alert!",
		text: "I will close in 2 seconds.",
		timer: 2000,
		showConfirmButton: false
	});
};

document.querySelector('ul.examples li.title-text button').onclick = function(){
	swal("Here's a message!", "It's pretty, isn't it?");
};

document.querySelector('ul.examples li.success button').onclick = function(){
	swal("Good job!", "You clicked the button!", "success");
};

document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
	swal({
		title: "Are you sure?",
		text: "You will not be able to recover this imaginary file!",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Yes, delete it!',
		closeOnConfirm: false
	},
	function(){
		swal("Deleted!", "Your imaginary file has been deleted!", "success");
	});
};

document.querySelector('ul.examples li.warning.cancel button').onclick = function(){
	swal({
		title: "Are you sure?",
		text: "You will not be able to recover this imaginary file!",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: '#DD6B55',
		confirmButtonText: 'Yes, delete it!',
		cancelButtonText: "No, cancel plx!",
		closeOnConfirm: false,
		closeOnCancel: false
	},
	function(isConfirm){
    if (isConfirm){
      swal("Deleted!", "Your imaginary file has been deleted!", "success");
    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
	});
};

document.querySelector('ul.examples li.custom-icon button').onclick = function(){
	swal({
		title: "Sweet!",
		text: "Here's a custom image.",
		imageUrl: 'images/thumbs-up.jpg'
	});
};

document.querySelector('ul.examples li.message-html button').onclick = function(){
	swal({
		title: "HTML <small>Title</small>!",
		text: 'A custom <span style="color:#F8BB86">html<span> message.',
		html: true
	});
};

</script>


</body>

</html>