有时，您将不得不向用户显示一个警告框，以使他们知道错误或通知。 浏览器提供的默认警报框的问题在于它们不是很吸引人。 当您创建具有丰富色彩组合和精美动画的网站以改善用户的浏览体验时，未设置样式的警报框似乎会不合适。
在本教程中，您将学习一个名为SweetAlert2的库，该库使我们可以创建各种警报消息，可以对其进行自定义以匹配我们自己网站的外观。
显示简单的警报消息
在向用户显示所有这些甜蜜警报消息之前，您必须安装该库并将其包含在您的项目中。 如果使用npm或bower ，则可以通过运行以下命令进行安装：
npm install sweetalert2
bower install sweetalert2您还可以获得CDN的最新版本的CDN链接 ，并使用脚本标签将其包含在您的网页中：
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>除了JavaScript文件，您还必须加载一个CSS文件，该文件用于设置库创建的所有警报框的样式：
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'> 一旦安装了库，创建甜蜜警报实际上非常容易。 您所要做的就是调用swal()函数。 只要确保在加载DOM之后调用该函数即可。
使用swal()函数创建甜蜜警报有两种方法。 您可以在三个不同的参数中传递标题，正文和图标值，也可以将单个参数作为具有不同值的对象作为键值对传递。 当您要为多个参数指定值时，在对象中传递所有内容将很有用。
当传递单个参数且它是字符串时，甜蜜警报将仅显示标题和确定按钮。 用户可以单击警报之外的任何位置或单击“确定”按钮以将其消除。
当传递了两个参数时，第一个成为标题，第二个成为警报内的文本。 您还可以通过传递第三个参数在警报框中显示图标。 它可以具有以下五个预定义值中的任何一个： warning ， error ， success ， info和question 。 如果不传递第三个参数，则警报消息内将不会显示任何图标。
document.querySelector(".first").addEventListener('click', function(){
swal("Our First Alert");
});
document.querySelector(".second").addEventListener('click', function(){
swal("Our First Alert", "With some body text!");
});
document.querySelector(".third").addEventListener('click', function(){
swal("Our First Alert", "With some body text and success icon!", "success");
});定制警报的配置选项
如果您只是想在警报框中显示一些基本信息，那么前面的示例就可以了。 但是，该库实际上可以做很多事情，而不仅仅是在警告消息中向用户显示一些文本。 您可以更改这些警报消息的各个方面以适合您自己的需求。
我们已经在一个甜美的警告消息中介绍了标题，文本和图标。 还有一个选项可以更改其中的按钮并控制其行为。 默认情况下，警报将只有一个带有“ OK”文本的确认按钮。 您可以通过设置confirmButtonText属性的值来更改确认按钮内的文本。 如果您还想在警报消息中显示取消按钮，则showCancelButton将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 。 此属性接受布尔值或字符串作为其值。 默认情况下，警报消息的背景主要由透明的灰色组成。 您可以通过的值设置完全隐藏它backdrop ，以false 。 同样，您也可以通过将backdrop值设置为字符串来在背景中显示自己的图像。 在这种情况下， backdrop字符串的整个值都分配给CSS background属性。 可以使用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({
title: "Show Two Buttons Inside the Alert",
showCancelButton: true,
confirmButtonText: "Confirm",
confirmButtonColor: "#00ff99",
cancelButtonColor: "#ff0099"
});
});
document.querySelector(".second").addEventListener("click", function() {
swal({
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({
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({
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方法
初始化不同的甜蜜警报消息以向用户显示是一回事，但是有时您还需要访问在初始化后控制这些警报消息的行为的方法。 幸运的是，SweetAlert2库提供了许多方法，可用于显示或隐藏模式以及获取其标题，文本，图像等。
您可以使用isVisible()方法检查模态是可见的还是隐藏的。 您也可以使用close()或closeModal()方法以编程方式关闭打开的模式。 如果您在初始化过程中碰巧对多个警报消息使用相同的属性集，则只需调用setDefaults({configurationObject}) 方法在开始时立即设置所有那些属性的值。 该库还提供了resetDefaults()方法，以将所有属性重置为其默认值。
您可以使用getTitle() ， getContent()和getImage()方法获取模态的标题，内容和图像。 同样，您还可以使用getConfirmButton()和getCancelButton()方法获取构成确认和取消按钮HTML。
还有许多其他方法可用于执行其他任务，例如以编程方式单击确认或取消按钮。
最后的想法
SweetAlert2库使开发人员只需设置一些属性的值，即可轻松创建自定义警报消息以向其用户显示。 本教程旨在涵盖该库的基础知识，以便您可以快速创建自己的自定义警报消息。
为防止帖子过大，我仅介绍了最常用的方法和属性。 如果要阅读可用于创建高级警报消息的所有其他方法和属性，则应阅读该库的详细文档 。
别忘了查看我们在Envato Market中可用的其他JavaScript资源。
随时让我知道您是否希望在本教程中进行任何澄清。
翻译自: https://code.tutsplus.com/tutorials/creating-pretty-popup-messages-using-sweetalert2--cms-30662