alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。
alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。
SweetAlert
確かに普通にアラート出すよりいいかもしれません。
<script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>
コアとSweetAlertを読み込みます。
$('.foo').click(function(){
swal({
title: "アラートです！",
text: "メッセージがココに入ります",
imageUrl: 'http://placehold.it/500x500',
confirmButtonText: '了解！',
confirmButtonColor: '#aee861'
});
});
オプション設定して完了です。
他にもオプションが用意されていますが、読めば大体分かると思いますので割愛します。
ライセンスはMITとの事です。詳細は以下でご確認ください。
Related Posts
幅が異なる要素にも対応可能なカルーセルを実装するjQueryプラグイン・Lemmon Slider
ダミー画像を超手軽に生成出来るWebサービス・PLACEHOLD.ITがやたら便利
ドラッグしたテキストをハイライトするjQueryプラグイン・jQuery Text Highlighter
ドラッグしたテキストで辞書検索出来るようにするjQueryプラグイン・Wordsmith
iOS4.2+ / モバイルSafariの「振る動作（シェイクジェスチャー）」をjQueryを使って検知する
マウスホイールで画像をズームさせるjQueryプラグイン・jQuery Wheelzoom
背景にした画像をドラッグ&ドロップ出来る様にするjQueryプラグイン・Draggable Background
マウスホイールで横スクロール+パララックス効果のあるコンテンツを実装するスクリプト・jInvertScroll
2014 年 11 月 28 日 4:38 PM
お世話になります。
大変有用なプラグインのご紹介ありがとう御座います。
formに「onSubmit=”return check(this)”」と設定して、Confirmの後にPOSTしたく
swal({ title: “登録をします”,
text: “よろしいですか？”,
type: “warning”,
showCancelButton: true,
confirmButtonColor: “#DD6B55”,
confirmButtonText: “Yes, delete it!”,
cancelButtonText: “No, cancel plx!”,
closeOnConfirm: true,
closeOnCancel: false },
function(isConfirm){
if (isConfirm) {
return true;
}else{
swal(“キャンセルしました”, “”, “error”);
return false;
}
});
としたのですが、Confirmを押す押さないに関わらず「登録をします、よろしいですか？」のページでPOSTされてしまいます。
Confirmを押すまで処理をさせないようにするにはどのようにしたらよろしいでしょうか？
2014 年 12 月 5 日 8:43 AM
自分もまさはるさんと全く同じ現象です！
onsubmit以外ならやる方法はあるのですが、
入力チェック等もいれたいので、onsubmitでやりきる方法を知りたいです！
2016 年 4 月 19 日 10:15 AM
申し訳ありません、調べたけど分かりませんでした・・
開発者の方にお問い合せ下さい。ご返信遅くなって申し訳ありませんorz
2016 年 4 月 18 日 6:29 PM
はじめまして。お世話になります。
わかりやすい解説ありがとうございます。
scriptのtext内で改行をいれたいのですが、¥nをいれても文字として表示され、改行できません。\nでも同様です。
改行の仕方を教えていただきたいです。宜しくお願いします。
2016 年 4 月 19 日 10:18 AM
ご紹介した本記事は2年前のもので古い情報となっています。
現在のバージョンはhtmlをtrueにするオプションが存在しているようです。
方法はスクリプトを配布している以下のWebサイトをご確認下さい。
http://t4t5.github.io/sweetalert/
ただしxssが心配な場合は使わないほうが良い、とも書いてありますのでご注意頂ければと思います。
2016 年 4 月 25 日 6:21 PM
できました！！
ありがとうございます☺︎
助かりました。m(_ _)m