【JS】alertウィンドウのデザインを変更できる「SweetAlert」

キレイなアラートを出力できる「SweetAlert」がステキなのでメモ。オプションも豊富にあり、多様なアラートに対応できる。

SweetAlert

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方はダウンロードした「sweet-alert.min.js」とCSSファイルを読み込ませます。

Java & CSS File
<script type="text/javascript" src="/js/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/sweet-alert.css">

あとは以下のようにhtmlを記述してjavaで適用する要素を指定して完成です。

html
<button class="alert">click</button>
Java
  $('.alert').click(function(){
	swal({   
		title: "Error!",   
		text: "Here's my error message!",  
		type: "error",   
		confirmButtonText: "Cool"
  });
});