【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
  • CSSグリッドレイアウトのコードを生成できるツール「Griddy」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
  • 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • 【jQuery】ページ移動時にアニメーション効果をつけられるAnimsition
POPULAR POSTS
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年9月版】
  • 無料で使えるおしゃれな英語の筆記体フリーフォントまとめ
RECENT POSTS
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年9月版】
  • プライス・値段表示などに使えそうな英数字フォント13選
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア