【開発環境】
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>
画面を見てみると
無事にダイアログが表示されました。
