簡単に美しいアラート・モーダルが作れるjavascriptライブラリ「SweetAlert2」

今回は簡単に美しいアラート・モーダルが作れるjavascriptライブラリ「SweetAlert2」をご紹介します。
ちなみにこのライブラリはjQueryを必要としません。
また、jQueryを読み込んでいても問題なく動くので安心してください。

導入方法

ダウンロードとインストール

公式サイトはこちら。
GitHubからzipファイルをダウンロードしてください。
zipファイルを展開して、distディレクトリの内容を適当なディレクトリにコピーしてください。
またCDNもあるので、CDNを使いたい人はこちらを確認してください。
今回はCDNを使っていきます。

コード

まずライブラリを読み込みます。

<!-- SweetAlert2の本体-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<!-- SweetAlert2のCSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<!-- IE11やAndroidブラウザ用のjsファイル-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>

アラートを出すためにボタンを配置します。

<input type="button" onclick="view()" value="アラート">

アラートを表示するスクリプトを記述します。

function view() {
    swal('アラート');
}

[btn class=”rich_pink”]デモ確認[/btn]

その他の簡単な設定

色々オプションがあるのですが、簡単な設定をいくつか紹介します。

見出しとテキストの設定

最初に紹介した方法だと、モーダルに太字の見出ししか表示されませんでした。
見出しの下にテキストを表示するには以下のスクリプトに変更してください。
titleパラメータが見出し、textパラメータがテキストになります。

function view() {
    swal({
        title: '見出し',
        text: 'テキスト',
    });
}

[btn class=”rich_pink”]デモ確認[/btn]

キャンセルボタンの表示

通常のままだとキャンセルボタンはは幼児されません。
showCancelButtonパラメータをtrueにすることで、キャンセルボタンが表示されます。

function view() {
    swal({
        title: '見出し',
        text: 'テキスト',
        showCancelButton: true,
    });
}

[btn class=”rich_pink”]デモ確認[/btn]

モーダルタイプの設定

モーダルタイプを指定すると、クエスチョンマークやワーニングのアイコンを表示することができます。

<input type="button" id="sample_btn" onclick="success()" value="サクセス">
<input type="button" id="sample_btn" onclick="warning()" value="ワーニング">
<input type="button" id="sample_btn" onclick="info()" value="インフォ">
<input type="button" id="sample_btn" onclick="error()" value="エラー">
<input type="button" id="sample_btn" onclick="question()" value="クエスチョン">

パラメータにtypeを追加して、表示したいアイコンを指定してください。

function success() {
    swal({
        title: 'サクセス',
        type: 'success',
    });
}
function warning() {
    swal({
        title: 'ワーニング',
        type: 'warning',
    });
}
function info() {
    swal({
        title: 'インフォ',
        type: 'info',
    });
}
function error() {
    swal({
        title: 'エラー',
        type: 'error',
    });
}
function question() {
    swal({
        title: 'クエスチョン',
        type: 'question',
    });
}

[btn class=”rich_pink”]デモ確認[/btn]

今回紹介した設定以外にもいろいろあるので、公式ページを参考にいろいろいじってみてください。