SweetAlert2CDN 引用，如何正确集成这个流行的JavaScript库到你的项目中？-耀盾

SweetAlert2是一款功能强大的纯JavaScript模态消息对话框插件，它用于替代浏览器默认的弹出对话框，该插件支持嵌入图片、背景和HTML标签等，并提供多种参数和方法，功能非常强大。

SweetAlert2 CDN 引用方法

SweetAlert2CDN 引用，如何正确集成这个流行的JavaScript库到你的项目中？插图1

（图片来源网络，侵删）

1、引入方式：可以通过CDN（内容分发网络）的方式在HTML页面中直接引入sweetalert2.min.css和sweetalert2.min.js文件，为了兼容IE浏览器，还需要额外引入promise.min.js文件。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-引入 SweetAlert2 CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark/dark.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark/dark.min.css">
    <!-引入 SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark/dark.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@sweetalert2/sweetalert2@11.5.4/dist/sweetalert2.all.min.js"></script>
    <!-引入 Promise.js (用于 IE 支持) -->
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill/dist/promise.min.js"></script>
</head>
<body>
    <h1>Hello World!</h2>
    <script>
        // 使用 SweetAlert2
        const timeout = 5000;
        const timerInterval = setTimeout(() => {
            /* 设置显示标签的内容 */
            var content = "无记录";
            var msg="";
            if (content != "") {
                msg =<p style="color:red;">最近一次操作后的最近5小时以内的记录如下：</p> + content;
            }
            Swal.fire({
                title: '标题',
                html: msg, // HTML 内容
                focusConfirm: true,
                confirmButtonText: '确认',
                showCloseButton: true,
                position: 'top-end',
                timer: 3000,
                type: 'success'
            }).then((result) => {
                if (result.isConfirmed) {
                    console.log('用户点击了确认按钮');
                } else if (result.dismiss === 'cancel') {
                    console.log('用户取消了对话框');
                }
            })
            clearTimeout(timerInterval);
        }, timeout);
    </script>
</body>
</html>

具体示例说明

1、基本用法

简单弹窗：通过swal('Hello world!')可以弹出一个简单的提示框。

多参数设置：通过swal({title: '提示', text: '早上好', confirmButtonText: '确认', confirmButtonColor: 'Green'})可以自定义更多的弹窗参数。

SweetAlert2CDN 引用，如何正确集成这个流行的JavaScript库到你的项目中？插图3

（图片来源网络，侵删）

2、高级用法

带情景模式的弹窗：可以通过swal({title: '标题', text: '文本', type: 'info'})来设置不同类型的情景模式弹窗。

自定义 HTML 内容：可以通过swal({html: '<p style="color:red;">内容</p>'})来嵌入自定义的HTML内容。

定时自动关闭：可以通过swal({..., timer: 3000})来设置弹窗在指定时间后自动关闭。

常见问题解答 (FAQs)

SweetAlert2CDN 引用，如何正确集成这个流行的JavaScript库到你的项目中？插图5

（图片来源网络，侵删）

1、如何引入 SweetAlert2？

答案：通过CDN的方式引入sweetalert2.min.css和sweetalert2.min.js文件，并引入promise.min.js以支持IE浏览器。

2、如何在弹窗中嵌入自定义的HTML内容？

答案：使用swal({html: '<p style="color:red;">内容</p>'})可以在弹窗中嵌入自定义的HTML内容。

3、如何设置不同类型的情景模式弹窗？

答案：通过swal({title: '标题', text: '文本', type: 'info'})可以设置不同类型的情景模式弹窗。

SweetAlert2是一款功能丰富且易于使用的JavaScript模态消息对话框插件，通过CDN方式可以轻松引入并在项目中使用。

以上内容就是解答有关sweetalert2cdn引用的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。

本文来源于互联网，如若侵权，请联系管理员删除，本文链接：https://www.9969.net/80399.html