Laravel7でsweetalert2を使ってダイアログを表示する

6974 ワード
Laravel7 JavaScript SweetAlert2 JavaScript テキストリンク

【開発環境】

Windows 10 HOME

Laravel Framework 7.25.0
PHP 7.4.7

【目次】

　　項目　　　　　
- はじめに
- 使い方
- この辺を参考に

はじめに

Laravel7でsweatalert2を使ってダイアログを表示してみてみた。

使い方

CDNを設定する。
(ファイルをダウンロードする方でもお好みで)

qiita.blade.php
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.4/sweetalert2.css"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.4/sweetalert2.js"></script>

HTMLのボタン部分。

qiita.blade.php
<input type="image" class="delete" id="delete" src="{{ asset('img/delete.png')}}" alt="削除する">

Javascriptの処理の部分。

qiita.blade.php

<script>
$('#delete').on('click', function(e) {
    e.preventDefault();
    var form = $('form');

    swal.fire({
        title: "本当に削除しますか?"
        ,icon: "warning"
        ,showCancelButton: true
        ,confirmButtonColor: "#DD6B55"
        ,confirmButtonText: "削除します!"
        ,position : 'center'
        ,closeOnConfirm: false
        ,allowEscapeKey: true //Escボタン
        ,allowOutsideClick : true //枠外クリック
        ,showCloseButton : true   //閉じるボタン

    }).then(function(result) { //←この行の記述を修正した結果改善された

        if (result.value) {

            form.submit();

            Swal.fire({
                position: 'center',
                icon: 'success',
                title: 'Successfully Deleted!',
                showConfirmButton: false,
                timer: 2500
            })
        }
    });
});
</script>

画面を見てみると
無事にダイアログが表示されました。

この辺を参考に

【使い方】 JS Sweet Alert 2

SweetAlert2のパラメータ（引数）の使い方まとめ | 使えるキー情報の使用頻度順一覧