使用SweetAlert2创建漂亮的弹窗消息

时不时地，您必须向用户显示一个警告框，让他们知道错误或通知。浏览器提供的默认警报框的问题在于它们不是很吸引人。当您创建具有出色色彩组合和精美动画以改善用户浏览体验的网站时，未设置样式的警报框会显得格格不入。

在本教程中，您将了解一个名为SweetAlert2的库，它允许我们创建各种警报消息，这些消息可以自定义以匹配我们自己网站的外观。

显示简单的警报消息

在向用户显示所有这些甜蜜的警报消息之前，您必须安装该库并将其包含在您的项目中。如果您使用的是npm 或 bower，则可以通过运行以下命令来安装它：

npm install sweetalert2
bower install sweetalert2

您还可以获得最新版本库的CDN 链接，并使用脚本标签将其包含在您的网页中：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.all.min.js"></script>

除了 javascript 文件，您还必须加载一个css文件，该文件用于设置库创建的所有警报框的样式：

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>

一旦你安装了这个库，创建一个甜蜜的警报实际上是非常容易的。您所要做的就是调用该Swal.fire() 函数。只需确保在dom加载后调用该函数。

有两种方法可以使用该 Swal.fire()功能创建甜蜜警报。您可以在三个不同的参数中传递标题、正文和图标值，也可以将单个参数作为具有不同值作为其键值对的对象传递。当您想为多个参数指定值时，传递对象中的所有内容很有用。

注意：旧版本的 SweetAlert2 使用 swal() 函数而不是 Swal.fire() . 如果您尝试使用旧 swal() 函数，您将收到错误“无法将类调用为函数”。

当传递一个参数并且它是一个字符串时，甜蜜警报将只显示一个标题和一个确定按钮。用户将能够单击警报之外的任何位置或单击“确定”按钮以将其关闭。

当传递两个参数时，第一个成为标题，第二个成为警报中的文本。您还可以通过传递第三个参数在警报框中显示一个图标。这可以具有以下五个预定义值中的任何一个： warning、 error、 success、 info和 question。如果您不传递第三个参数，则警报消息中不会显示任何图标。

document.queryselector(".first").addeventListener('click', function(){
  Swal.fire("我们的第一个警报");});document.querySelector(".second").addEventListener('click', function(){
  Swal.fire("我们的第一个警报", "带有一些正文！");});document.querySelector(".third").addEventListener('click', function(){
  Swal.fire("我们的第一个警报", "带有一些正文和成功图标！", "成功");});

自定义警报的配置选项

如果您只是想在警告框中显示一些基本信息，前面的示例就可以了。但是，该库实际上可以做的不仅仅是在警报消息中向用户显示一些文本。您可以更改这些警报消息的各个方面以满足您自己的需要。

我们已经介绍了甜蜜警报消息中的标题、文本和图标。还有一个选项可以更改其中的按钮并控制它们的行为。默认情况下，警报将只有一个确认按钮，其中包含“OK”文本。您可以通过设置属性的值来更改确认按钮内的文本 confirmButtonText 。如果您还想在警报消息中显示取消按钮，您只需将的值设置 showCancelButton 为 true。可以使用该 cancelButtonText 属性更改取消按钮内的文本。

confirmButtonColor 可以使用和 cancelButtonColor 属性为这些按钮中的每一个赋予不同的背景颜色。确认按钮的默认颜色是 #3085d6，而取消按钮的默认颜色是 #aaa。如果您想在确认或取消按钮上应用任何其他自定义，您可以简单地使用 confirmButtonClass 和 cancelButtonClass属性向它们添加一个新类。添加类后，您将能够使用 CSS 更改这些按钮的外观。您还可以使用该 customClass 属性在主模式本身上添加一个类。

如果您在第一个示例中与警报消息进行了交互，您可能已经注意到可以通过按 Enter 或 Escape 键来关闭模式。同样，您也可以单击模态框外的任意位置以将其关闭。发生这种情况是因为 , 和的值 allowEnterKey默认 allowEscapeKey设置 allowOutsideClick 为 true 。

当您在模态框内显示两个不同的按钮时，确认按钮是默认焦点。focusConfirm 您可以通过将的值设置为来移除确认按钮的焦点 false。同样，您也可以通过设置 to 的值 focusCancel 来设置取消按钮的焦点true。

默认情况下，确认按钮始终显示在左侧。您可以选择通过将值设置为来反转确认和取消按钮的位置。reverseButtonstrue

除了更改警报消息内按钮的位置和颜色外，您还可以更改警报消息的背景和位置或周围的背景。不仅如此，该库还允许您在警报消息中显示自己的自定义图标或图像。这在很多情况下都有帮助。

backdrop您可以使用该属性自定义甜蜜警报的背景。此属性接受布尔值或字符串作为其值。默认情况下，警报消息的背景主要由透明的灰色组成。您可以通过设置 to 的值backdrop 来完全隐藏它false。backdrop 同样，您也可以通过将值设置为字符串来在背景中显示自己的图像。在这种情况下，字符串的整个值 backdrop 都分配给 CSS background 属性。可以使用该 background 属性控制甜蜜警报消息的背景。默认情况下，所有警报消息都具有完全白色的背景。

默认情况下，所有警报消息都会在窗口中心弹出。position 但是，您可以使用该属性使它们从不同的位置弹出。此属性可以有九个不同的值，其名称一目了然： top、 top-start、 top-end、 center、 center-start、 center-end、 bottom、 bottom-start和 bottom-end。

animation 您可以通过将属性的值设置为来禁用弹出模式时的动画 false。该库还提供了一个 timer 属性，可用于在经过特定毫秒数后自动关闭计时器。

在下面的示例中，我使用了本节中讨论的所有属性的不同组合来创建四种不同的警报消息。这应该演示如何完全改变 SweetAlert2 库创建的模式的外观和行为。

document.querySelector(".first").addEventListener("click", function() {
  Swal.fire({
    title: "Show Two Buttons Inside the Alert",
    showCancelButton: true,
    confirmButtonText: "Confirm",
    confirmButtonColor: "#00ff99",
    cancelButtonColor: "#ff0099"
  });
});

document.querySelector(".second").addEventListener("click", function() {
  Swal.fire({
    title: "Are you sure about deleting this file?",
    type: "info",
    showCancelButton: true,
    confirmButtonText: "Delete It",
    confirmButtonColor: "#ff0055",
    cancelButtonColor: "#999999",
    reverseButtons: true,
    focusConfirm: false,
    focusCancel: true
  });
});

document.querySelector(".third").addEventListener("click", function() {
  Swal.fire({
    title: "Profile Picture",
    text: "Do you want to make the above image your profile picture?",
    imageUrl: "https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg",
    imageWidth: 550,
    imageHeight: 225,
    imageAlt: "Eagle Image",
    showCancelButton: true,
    confirmButtonText: "Yes",
    cancelButtonText: "No",
    confirmButtonColor: "#00ff55",
    cancelButtonColor: "#999999",
    reverseButtons: true,
  });
});

document.querySelector(".fourth").addEventListener("click", function() {
  Swal.fire({
    title: "Alert Set on Timer",
    text: "This alert will disappear after 3 seconds.",
    position: "bottom",
    backdrop: "linear-gradient(yellow, orange)",
    background: "white",
    allowOutsideClick: false,
    allowEscapeKey: false,
    allowEnterKey: false,
    showConfirmButton: false,
    showCancelButton: false,
    timer: 3000
  });
});

使用 SweetAlert2 创建 toast

您可能会时不时地看到智能手机上出现的小消息或警报。这些消息出现在屏幕底部附近的所有其他内容之上，并在一段时间后消失。当您想通知用户诸如文件下载完成之类的事情时，它们很有用。

toast 通过将参数的值设置为，您可以将任何警报转换为 toast 通知true。如果您未使用 position 参数指定位置，则 Toast 将显示在屏幕中间，因为 position 默认为 center 未指定时。

Swal.fire({
    toast: true,
    icon: 'success',
    title: 'posted successfully',
    animation: false,
    position: 'bottom',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
      toast.addEventListener('mouseenter', Swal.stopTimer)
      toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
  })

您添加到网站的许多警报和祝酒词可能会使用相同的属性值以保持一致性。例如，假设您要创建两个单独的 toast：一个用于成功登录，另一个用于错误密码。您可以使用该mixin() 方法来避免任何重复。Swal此方法返回由所有提供的参数作为默认值组成的扩展版本。您不再需要一次又一次地为不同的警报提供相同的值。

这是一个例子：

var toastMixin = Swal.mixin({
    toast: true,
    icon: 'success',
    title: 'General Title',
    animation: false,
    position: 'top-right',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
      toast.addEventListener('mouseenter', Swal.stopTimer)
      toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
  });
  
document.querySelector(".second").addEventListener('click', function(){
  toastMixin.fire({
    animation: true,
    title: 'Signed in Successfully'
  });
});

document.querySelector(".third").addEventListener('click', function(){
  toastMixin.fire({
    title: 'Wrong Password',
    icon: 'error'
  });
});

将 mixin 存储在变量中允许我们 fire()稍后调用，参数可以指定新值或覆盖默认值。下面的 CodePen 演示展示了所有三个 toast 的运行情况。

重要的 SweetAlert2 方法

初始化不同的甜蜜警报消息以向用户显示它们是一回事，但有时您还需要访问在初始化后控制这些警报消息行为的方法。幸运的是，SweetAlert2 库提供了许多可用于显示或隐藏模式以及获取其标题、文本、图像等的方法。

您可以使用该方法检查模态是否可见或隐藏 isVisible() 。您还可以使用 close() or closeModal() 方法以编程方式关闭打开的模式。

如果您碰巧在初始化期间对多个警报消息使用相同的属性集，您可以简单地使用 Swal.mixin(). 传递一个配置对象，Swal.mixin() 并将返回一个带有这些配置预设的新实例。

const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
})

//now we can use Toast just like the Swal class
Toast.fire(...)

请注意，此功能由 Sweet Alert 7.x 及更早版本中的setDefaults() 和方法提供。resetDefaults()

getTitle()您可以使用、 getContent()和 getImage()方法获取模态框的标题、内容和图像。getConfirmButton() 同样，您还可以使用and 方法获取构成确认和取消按钮的 SweetAlert html 代码getCancelButton() 。

还有许多其他方法可用于执行其他任务，例如以编程方式单击确认或取消按钮。