如何在Laravel中显示弹出警报

时间:2019-10-26 09:46:37

标签: javascript jquery laravel sweetalert2

在我的数据库中,我有一个称为任务的表,它有一个名为file的列,用于存储文件。现在我想要当用户单击文件时,他将显示一条弹出消息,询问您是否下载或查看文件。

部分尝试这样

<a href="" id="popup">{{ $task->file }}

我为此创建了一个甜蜜的消息,如下所示

$(document).ready(function () {
          $('popup').on('click', 'td.warning input', function () {
            Swal.fire({
                    title: "Wow!",
                    text: "Message!",
                    type: "success",
                    showCancelButton: true,
                    cancelButtonText: "View",
                    confirmButtonText: 'Download!',
                },
                function (isConfirm) {
                    if (isConfirm) {
                        swal("Deleted!", "Your imaginary file has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Your imaginary file is safe :)", "error");
                    }
                });
          });
      });
    </script

请帮助我实现这一目标

1 个答案:

答案 0 :(得分:0)

向甜蜜警报添加一些html代码,以便您可以显示消息或图像,就像我在这里所做的那样,您可以查看文档以获取更多可以做的事的示例: https://sweetalert2.github.io/

<a href="" id="popup">{{ $task->file }}
<script>
$(document).ready(function () {
          $('popup').on('click', 'td.warning input', function () {
            Swal.fire({
                    title: "Wow!",
                    text: "Message!",
                    type: "success",
                    showCancelButton: true,
                    cancelButtonText: "View",
                    confirmButtonText: 'Download!',
                },
                function (isConfirm) {
                    if (isConfirm) {
                        swal("Deleted!", "Your imaginary file has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Your imaginary file is safe :)", "error");
                    }
                });
          });
      });
    </script>

然后,您可以通过添加if和else swal的一些html代码来添加甜蜜的警报,某种消息传递:

if (isConfirm) {
        swal(
        title:"Deleted!", 
        text: "Your imaginary file has been deleted!",
        type: "success",
        html: '<h1>Text here to download or to view</h1>'+
        '<p>show some more text or show image</p>'
        );
} else {
        swal(
        title:"Cancelled", 
        text: "Your imaginary file is safe :)", 
        type: "error",
        html: '<h1>Text here to download or to view</h1>'+
        '<p>show some more text or show image</p>'
);
}

希望这对您有用...