alert()のダイアログのスタイルを変更するスクリプト・SweetAlert

スポンサーリンク

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との事です。詳細は以下でご確認ください。

SweetAlert

URL :
TRB :

Comments & Trackbacks (12)

  1. まさはる

    お世話になります。
    大変有用なプラグインのご紹介ありがとう御座います。

    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を押すまで処理をさせないようにするにはどのようにしたらよろしいでしょうか?

    • いそ

      自分もまさはるさんと全く同じ現象です!
      onsubmit以外ならやる方法はあるのですが、
      入力チェック等もいれたいので、onsubmitでやりきる方法を知りたいです!

    • シロ

      申し訳ありません、調べたけど分かりませんでした・・
      開発者の方にお問い合せ下さい。ご返信遅くなって申し訳ありませんorz

  2. ゆうみ

    はじめまして。お世話になります。
    わかりやすい解説ありがとうございます。

    scriptのtext内で改行をいれたいのですが、¥nをいれても文字として表示され、改行できません。\nでも同様です。
    改行の仕方を教えていただきたいです。宜しくお願いします。

    • シロ

      ご紹介した本記事は2年前のもので古い情報となっています。
      現在のバージョンはhtmlをtrueにするオプションが存在しているようです。
      方法はスクリプトを配布している以下のWebサイトをご確認下さい。

      http://t4t5.github.io/sweetalert/

      ただしxssが心配な場合は使わないほうが良い、とも書いてありますのでご注意頂ければと思います。

      • ゆうみ

        できました!!
        ありがとうございます☺︎
        助かりました。m(_ _)m

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Leave a Reply

Ads

Posts

Contact

Services