【開発環境】

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のパラメータ（引数）の使い方まとめ | 使えるキー情報の使用頻度順一覧