每隔一段时间，你就必须向你的用户显示一个提示框，让他们知道某个错误或通知。浏览器提供的默认提示框的问题是，它们不是很有吸引力。当你在创建一个有很好的色彩组合和花哨的动画的网站，以提高用户的浏览体验时，没有风格的提示框会显得不伦不类。
在本教程中，你将了解到一个叫做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("Our First Alert");
});
document.querySelector(".second").addEventListener('click', function(){
Swal.fire("Our First Alert", "With some body text!");
});
document.querySelector(".third").addEventListener('click', function(){
Swal.fire("Our First Alert", "With some body text and success icon!", "success");
});
定制警报的配置选项
如果你只是想在警报框中显示一些基本信息，前面的例子就可以了。然而，该库实际上可以做得更多，而不仅仅是在警报信息中向用户显示一些文本。你可以改变这些提示信息的每一个方面以满足你自己的需要。
我们已经涵盖了标题、文本和甜美提示信息中的图标。还有一个选项可以改变里面的按钮并控制其行为。默认情况下，一个警报只会有一个带有 "OK "文字的确认按钮。你可以通过设置confirmButtonText 属性的值来改变确认按钮里面的文本。如果你还想在你的警告信息中显示一个取消按钮，你只需将showCancelButton 的值设置为true 。取消按钮内的文本可以通过cancelButtonText 属性来改变。
每个按钮都可以使用confirmButtonColor 和cancelButtonColor 属性赋予不同的背景颜色。确认按钮的默认颜色是#3085d6 ，而取消按钮的默认颜色是#aaa 。如果你想在确认或取消按钮上应用任何其他定制，你可以简单地使用confirmButtonClass 和cancelButtonClass 属性来为它们添加一个新的类。一旦添加了类，你就可以使用CSS来改变这些按钮的外观。你还可以通过使用customClass 属性在主模态本身上添加一个类。
如果你与第一个例子中的警告信息进行了交互，你可能已经注意到，模态可以通过按下Enter或Escape键来关闭。同样地，你也可以点击模态外的任何地方，以解除它。这是因为allowEnterKey,allowEscapeKey,allowOutsideClick 的值被默认设置为true 。
当你在一个模态中显示两个不同的按钮时，确认按钮是默认的焦点。你可以通过将focusConfirm 的值设置为false 来移除确认按钮的焦点。同样地，你也可以通过将focusCancel 的值设置为true 来设置取消按钮的焦点。
默认情况下，确认按钮总是显示在左边。你可以通过设置reverseButtons 到true 的值来反转确认和取消按钮的位置。
除了改变警报信息里面的按钮的位置和颜色，你还可以改变警报信息的背景和位置或者周围的背景。不仅如此，该库还允许你在警报信息中显示你自己的自定义图标或图像。这在很多情况下是有帮助的。
你可以使用backdrop 属性来定制甜蜜警报的背景。这个属性可以接受布尔值或字符串作为其值。默认情况下，警报信息的背景主要由透明的灰色组成。你可以通过将backdrop 的值设置为false 来完全隐藏它。同样地，你也可以通过将backdrop 的值设置为字符串来在背景中显示你自己的图像。在这种情况下，backdrop 字符串的整个值被分配给CSSbackground 属性。甜蜜提示信息的背景可以用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 参数的值设置为true ，将任何警报变成敬酒通知。如果你没有用position 参数指定一个位置，敬酒将显示在屏幕的中间，因为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)
}
})
你添加到你的网站上的许多警报和祝词可能会使用相同的属性值以保持一致性。例如，假设你想创建两个独立的祝词：一个是成功登录，另一个是错误的密码。你可以使用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'
});
});
将混合器存储在一个变量中，允许我们在以后调用fire() ，参数可以指定一个新值或覆盖默认值。下面的CodePen演示显示了所有三种敬酒的动作。
重要的SweetAlert2方法
初始化不同的甜味警报信息以显示给用户是一件事，但有时你也需要访问控制初始化后这些警报信息的行为的方法。幸运的是，SweetAlert2库提供了许多方法，可以用来显示或隐藏一个模态，以及获得它的标题、文本、图像等。
你可以使用isVisible() 方法检查一个模态是否可见或隐藏。你也可以通过使用close() 或closeModal() 方法以编程方式关闭一个打开的模态。
如果你碰巧在初始化多个警报信息时使用相同的属性集，你可以简单地用Swal.mixin() 创建一个新的Sweet Alert实例。传递一个配置对象，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() 和getCancelButton() 方法，获得SweetAlert的HTML代码，组成确认和取消按钮。
还有一些其他方法，可以用来执行其他任务，如以编程方式点击确认或取消按钮。
来自CodeCanyon的漂亮弹出式JavaScript模板
在PHP中使用SweetAlert是学习一些新技能的好方法。但是，如果你想获得漂亮的弹出窗口，而不需要太深入地研究代码，那么请看看CodeCanyon的这些下载。
1.Kreatura Slider Plugin for jQuery
Kreatura不仅仅是一个jQuery滑块插件。它也提供一些漂亮的弹出窗口。它配备了大量的模板，你可以按原样使用或定制。值得庆幸的是，Kreatura的定制是一个简单的过程。你不需要像从头开始制作SweetAlert PHP弹出窗口那样花很多时间。
2.灵活的模式--CSS3支持的弹出式窗口
用Slick Modal创建近乎无限的组合。它包括各种设置、插件和演示模板，使定制成为丰富的体验。Slick Modal会给你带来以下功能。
- 通过Ajax加载内容
- 页面背景效果
- 9个弹出位置
- 动画弹出、覆盖和内容
3.jQuery Flying Popup
你可以用这个随时可用的下载工具创建很酷的弹出窗口。jQuery Flying Popup带有四个模板，你可以根据自己的需要进行定制。它最近的更新还增加了一个响应式设计，所以你的弹出窗口可以适合多种屏幕尺寸。这是一个很好的替代方案，可以从头开始建立一个SweetAlert 2警报。
4.jQuery MsgBox
这是一个简单的、易于定制的脚本，用于制作弹出式消息框。它的特点是最小的弹出窗口，相对来说比较简陋。尽管它很简单，但它是alert() 、confirm() 、prompt() 等函数的基本功能的一个很好的替代。
5.flavr-Flat jQuery弹出式对话框
让我们用flavr来结束这个列表。它是一个jQuery弹出式模板，使用了令人难以置信的扁平化设计语言。它不仅容易使用，而且由于采用了响应式设计，它也很容易在多种屏幕尺寸上看起来不错。如果你没有时间在JavaScript中使用CSS做提示框，可以试试flavr。
最后的思考
SweetAlert2库使开发者很容易通过简单地设置几个属性的值来创建自定义的警报信息，以显示给他们的用户。本教程旨在介绍这个库的基础知识，以便你能快速创建自己的自定义警报信息。
