SweetAlert2例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2例子</title>
    <link rel="stylesheet" >


</head>
<body>
<div class="demo_1">
    帶有 確定和取消的 彈框1：
    <button>點擊這里</button>
</div>
<div class="demo_2">
    帶有 確定和取消的 彈框2:
    <button>點擊這里</button>
</div>
<div class="demo_3">
    帶有 展示 標(biāo)簽內(nèi)容 的彈框：
    <button>點擊這里</button>
</div>
<div class="demo_4">
    帶有定位 和 消失時間的 彈框：
    <button>點擊這里</button>
</div>
<div class="demo_5">
    自定義 第三方 css 的 彈框 (推薦使用 Animate.css )：
    <button>點擊這里</button>
</div>
<div class="demo_6">
    右上角 通知類 彈窗：
    <button>點擊這里</button>
</div>
<div class="demo_7">
    做 一個自己的 通用模版：
    <button>點擊這里</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        $(".demo_1 button").click(function () {
            Swal.fire({
                type: 'warning', // 彈框類型
                title: '注銷帳號', //標(biāo)題
                text: "注銷后將無法恢復(fù)病毡，請謹(jǐn)慎操作申眼！", //顯示內(nèi)容

                confirmButtonColor: '#3085d6',// 確定按鈕的 顏色
                confirmButtonText: '確定',// 確定按鈕的 文字
                showCancelButton: true, // 是否顯示取消按鈕
                cancelButtonColor: '#d33', // 取消按鈕的 顏色
                cancelButtonText: "取消", // 取消按鈕的 文字

                focusCancel: true, // 是否聚焦 取消按鈕
                reverseButtons: true  // 是否 反轉(zhuǎn) 兩個按鈕的位置 默認(rèn)是  左邊 確定  右邊 取消
            }).then((isConfirm) => {
                try {
                    //判斷 是否 點擊的 確定按鈕
                    if (isConfirm.value) {
                        Swal.fire("成功", "點擊了確定", "success");
                    } else {
                        Swal.fire("取消", "點擊了取消", "error");
                    }
                } catch (e) {
                    alert(e);
                }
            });
        });
        $(".demo_2 button").click(function () {
            Swal.fire({
                title: '領(lǐng)取你的尋龍裝備！',
                input: 'select',
                html:
                    '<input id="swal-input1" class="swal2-input">' +
                    '<input id="swal-input2" class="swal2-input">',
                inputAttributes: {
                    autocapitalize: 'off'
                },
                showCancelButton: true,
                confirmButtonText: 'Look up',
                showLoaderOnConfirm: true,
                preConfirm: (login) => {
                    return fetch(`//api.github.com/users/${login}`)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(response.statusText)
                            }
                            return response.json()
                        })
                        .catch(error => {
                            Swal.showValidationMessage(
                                `Request failed: ${error}`
                            )
                        })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.value) {
                    Swal.fire({
                        title: `${result.value.login}'s avatar`,
                        imageUrl: result.value.avatar_url
                    })
                }
            })
        });
        $(".demo_3 button").click(function () {
            var content = "無記錄";
            var msg = ""; //msg 是從外面?zhèn)魅氲臄?shù)據(jù)

            if (msg) {

                content = "<p style='color: red'>最近一次操作后的5小時內(nèi)有效</p> "
                    + "<p>可以使用 Ctrl +F 查找關(guān)鍵字</p>"
                    + "<table class='table_list'>"
                    + "<tr>"
                    + "     <th class='js_tr_data'> 時間</th> <th>名稱</th> <th>密碼</th>"
                    + "</tr>"
                    + msg
                    + "</table>"
            }

            Swal.fire({
                title: '<strong>記錄</strong>',
                type: 'info',
                html: content, // HTML
                focusConfirm: true, //聚焦到確定按鈕
                showCloseButton: true,//右上角關(guān)閉
            })

        });
        $(".demo_4 button").click(function () {
            Swal.fire({
                position: 'top-end', //定位 左上角
                type: 'success',
                title: 'Your work has been saved',
                showConfirmButton: false,
                timer: 1500
            });

        });
        $(".demo_5 button").click(function () {
            Swal.fire({
                title: 'Custom animation with Animate.css',
                animation: false,
                customClass: 'animated tada'
            })

        });

        $(".demo_6 button").click(function () {
            Swal.fire({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                type: 'success',
                title: 'Signed in successfully'
            })

        });
        //定義模版 (可多次使用)
        var MyBox = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
        $(".demo_7 button").click(function () {


            //調(diào)用
            MyBox.fire({
                type: 'success',
                title: 'successfully'
            });

        })
    });
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者