ソフトウェア開発・販売 「エム・エス ファクトリー」

お問い合わせ・ご相談はお気軽にどうぞ
info@i-msf.com
 > 開発メモ  > Javascript  > SweetAlert

SweetAlert

ちょっとオシャレでかわいいアラート。
JavaScriptだけで実装出来る。(jQuery不要)
CSSが別なのでメインのCSSの影響を受けにくい。
確認アラートの Yes/No ボタン表示が 日本仕様(?)ではないので No/Yes になります。

実装例
html




デモ


デモ ベーシックアラート
swal("Here's a message!");

デモ 説明文言付きアラート
swal("Here's a message!", "It's pretty, isn't it?");

デモ 成功アラート
swal("Good job!", "You clicked the button!", "success");
// アイコンの種類 "warning","error","success","info"

デモ 確認アラート(Yesで機能実行)
swal({
		// 表示するタイトル(default:null)
		title: "Are you sure?",
		// 表示するテキスト文(default:null)
		text: "You will not be able to recover this imaginary file!",
		// タイプ(warning,error,success,info)(default:null)
		type: "warning",
		// cancelボタンの表示(default:false)
		showCancelButton: true,
		// confirmボタンの色設定(16進数値)(default:"#AEDEF4")
		confirmButtonColor: "#DD6B55",
		// confirmボタンのテキスト設定(default:"OK")
		confirmButtonText: "Yes, delete it!",
		// cancelボタンのテキスト設定(default:"Cancel")
		cancelButtonText : "Cancel",
		// confirmボタン押下でウインドウを閉じるかどうかの設定(default:true)
		closeOnConfirm: false,
		// cancelボタン押下でウインドウを閉じるかどうかの設定(default:true)
		closeOnCancel : true
	},
	function(){
		swal("Deleted!", "Your imaginary file has been deleted.", "success");
	}
);

デモ 確認アラート(Yes/Cancelで機能実行)
swal({
		// 表示するタイトル(default:null)
		title: "Are you sure?",
		// 表示するテキスト文(default:null)
		text: "You will not be able to recover this imaginary file!",
		// タイプ(warning,error,success,info)(default:null)
		type: "warning",
		// cancelボタンの表示(default:false)
		showCancelButton: true,
		// confirmボタンの色設定(16進数値)(default:"#AEDEF4")
		confirmButtonColor: "#DD6B55",
		// confirmボタンのテキスト設定(default:"OK")
		confirmButtonText: "Yes, delete it!",
		// cancelボタンのテキスト設定(default:"Cancel")
		cancelButtonText : "Cancel",
		// confirmボタン押下でウインドウを閉じるかどうかの設定(default:true)
		closeOnConfirm: false,
		// cancelボタン押下でウインドウを閉じるかどうかの設定(default:true)
		closeOnCancel : false
	},
	function(isConfirm){
		if (isConfirm) {
			swal("Deleted!", "Your imaginary file has been deleted.", "success");
		} else {
			swal("Cancelled", "Your imaginary file is safe :)", "error");
		}
	}
);

デモ 「プロンプト」機能付き
swal({
		title: "An input!",
		text: 'Write something interesting:',
		type: 'input',
		showCancelButton: true,
		closeOnConfirm: false,
		animation: "slide-from-top",
		inputPlaceholder: "Write something",
	},
	function(inputValue){
		if (inputValue === false) return false;
		if (inputValue === "") {
			swal.showInputError("You need to write something!");
			return false;
		}
		swal("Nice!", 'You wrote: ' + inputValue, "success");
	}
);

Copyright(C) ms-factory All Rights Reserved.