SweetAlertプラグインのデモページ

【jQuery必要なし】簡単にオシャレなアラートが作れるSweetAlertプラグイン

2014.10.12   10286


オシャレでかわいいアラートをお探しのあなたは必見。
jQueryは必要なしでJavaScriptだけで実装出来るSweet Alertプラグイン。
まずはデモだけでも見て頂きたい。


 

Sweet Alertプラグインのオススメ/ポイント

  •   オシャレでキレイなアラートが簡単に実装可能
  •   アラートにオリジナルの画像を入れられる
  •   jQueryも必要なし

Sweet Alertプラグインのデモ


Sweet Alertプラグインのページ


Sweet Alertプラグインの使い方

それではSweet Alertプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<!-- ベーシックアラート -->
<button class="basic">Try me!</button>

<!-- 説明文言付きアラート -->
<button class="text-under">Try me!</button>

<!-- 成功アラート -->
<button class="success">Try me!</button>

<!-- 確認アラート -->
<button class="confirm">Try me!</button>

<!-- 画像付きアラート -->
<button class="image">Try me!</button>

CSSコード

<link rel="stylesheet" href="../lib/sweet-alert.css">

JavaScriptコード

<script src="../lib/sweet-alert.js"></script>
<script>
    // ベーシックアラート
    document.querySelector('button.basic').onclick = function(){
        swal("ここにメッセージ!");
    };

    // 説明文言付きアラート
    document.querySelector('button.text-under').onclick = function(){
        swal("ここにメッセージ!", "ここに補足事項!");
    };

    // 成功アラート
    document.querySelector('button.success').onclick = function(){
        swal("グッジョブ!!", "You clicked the button!", "success");
    };

    // 確認アラート
    document.querySelector('button.confirm').onclick = function(){
        swal({
            title:"Are you sure?", // タイトル文
            text:"Your will not be able to recover this imaginary file!", //説明文
            type:"warning", // default:null "warning","error","success","info"
            allowOutsideClick:false, // default:false アラートの外を画面クリックでアラート削除
            showCancelButton: true, // default:false キャンセルボタンの有無
            confirmButtonText:"オッケー", // default:"OK" 確認ボタンの文言
            confirmButtonColor: "#DD6B55", // default:"#AEDEF4" 確認ボタンの色
            cancelButtonText:"キャンセル", // キャンセルボタンの文言
            closeOnConfirm: false // default:true 確認ボタンを押したらアラートが削除される
            },
            function(){
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
            }
        );
    };

    // 画像付きアラート
    document.querySelector('button.image').onclick = function(){
        swal({title:"良いね!",text:"オリジナルの画像を入れられるよ!",imageUrl:"images/thumbs-up.jpg});
    };
</script>

チェックポイント

デモページはBootstrapを入れてデザインを調整していますので、その点ご注意下さい。

プラグインへ一言

chromeのアラートは物寂しいからこのプラグインだと明るくて良いね

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております