【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"
  });
});


PICK UP
RELATED POSTS
  • 【Webデザイン】魅力的な動きをするレスポンシブメニュー
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • CSSアニメーション制作に役立つライブラリとアイデア
  • Google Fontsの使い方とおすすめ日本語フォント -初心者向け-
  • 【jQuery】サイドバーをスライドで表示できるSimple Sidebar
  • 【JS】マウスの動きに合わせて影の角度が変化する「shine.js」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • 無料で使えるおしゃれな英語の筆記体フリーフォントまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年5月版】
  • フォントを調べる時に役に立つサービス・サイトまとめ
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年5月版】
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア