一、總結(jié)

---

sweetalert2的窗口美觀，移動(dòng)端適配也比較好，易學(xué)易用，是一款簡(jiǎn)單便捷的組件，值得學(xué)習(xí)！

SweetAlert2和SweetAlert的區(qū)別？

SweetAlert2是SweetAlert-js的升級(jí)版本，它解決了SweetAlert-js中不能嵌入HTML標(biāo)簽的問題，并對(duì)彈出對(duì)話框進(jìn)行了優(yōu)化，同時(shí)提供對(duì)各種表單元素的支持，還增加了5種情景模式的模態(tài)對(duì)話框。

SweetAlert2是一款功能強(qiáng)大的純Js模態(tài)消息對(duì)話框插件。SweetAlert2用于替代瀏覽器默認(rèn)的彈出對(duì)話框，它提供各種參數(shù)和方法，支持嵌入圖片，背景，HTML標(biāo)簽等，并提供5種內(nèi)置的情景類，功能非常強(qiáng)大。

二、SweetAlert2的使用教程（轉(zhuǎn)）

---

轉(zhuǎn)自：SweetAlert 2 全網(wǎng)最詳細(xì)的使用方法
https://blog.csdn.net/dibr63585/article/details/102042483

官網(wǎng)地址：SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
https://sweetalert2.github.io/

使用方法：

使用sweetalert對(duì)話框需要引入對(duì)應(yīng)的js和css（如 sweetalert2.min.css 和 sweetalert2.min.js），因?yàn)槔锩娴膒romise屬性不支持ie11，所以也需要引入promise.min.js文件，而且改js必須依托jQuery，所以需要引入jquery.min.js。如下圖?

<link rel="stylesheet" href="sweetalert/sweetalert2.min.css" /> <script type="text/javascript" src="jquery3.1.0/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="sweetalert/es6-promise.auto.js"></script> <script type="text/javascript" src="sweetalert/sweetalert2.min.js"></script>

但是在網(wǎng)上下載的時(shí)候發(fā)現(xiàn)要不就是需要csdn積分，要不下載的就不能用，所以此處提供一個(gè)下載的鏈接：

https://www.bootcdn.cn/limonte-sweetalert2/

首先創(chuàng)建2個(gè)文件，一個(gè)是css文件，一個(gè)js文件，然后打開這個(gè)網(wǎng)站之后，找到自己想要版本的css和js，然后打開對(duì)應(yīng)的鏈接，復(fù)制里面內(nèi)容分別粘貼到自己創(chuàng)建的文件中即可使用，以測(cè)試。

基本用法：

最基本的使用方法是通過swal()來彈出一個(gè)對(duì)話框。

swal("Hello world!");

如果要彈出一個(gè)帶情景模式的對(duì)話框，可以在的第二個(gè)參數(shù)中設(shè)置。

swal("Good job!", "You clicked the button!", "success");

swal(...)會(huì)返回一個(gè)Promise對(duì)象，該P(yáng)romise對(duì)象中then方法中的isConfirm參數(shù)的含義如下：

• true：代表Confirm（確認(rèn)）按鈕。
• false：代表Cancel（取消）按鈕。
• undefined：代表按下Esc鍵，點(diǎn)擊取消按鈕或在對(duì)話框之外點(diǎn)擊。

配置參數(shù)：

參數(shù)	默認(rèn)值	描述
title	null	模態(tài)對(duì)話框的標(biāo)題。它可以在參數(shù)對(duì)象的title參數(shù)中設(shè)置，也可以在swal()方法的第一個(gè)參數(shù)設(shè)置。
text	null	模態(tài)對(duì)話框的內(nèi)容。它可以在參數(shù)對(duì)象的text參數(shù)中設(shè)置，也可以在swal()方法的第二個(gè)參數(shù)設(shè)置。
html	null	對(duì)話框中的內(nèi)容作為HTML標(biāo)簽。如果同時(shí)提供text和html參數(shù)，插件將會(huì)優(yōu)先使用text參數(shù)。
type	null	對(duì)話框的情景類型。有5種內(nèi)置的情景類型：warning，error，success，info和question。它可以在參數(shù)對(duì)象的type參數(shù)中設(shè)置，也可以在swal()方法的第三個(gè)參數(shù)設(shè)置。
customClass	null	模態(tài)對(duì)話框的自定義class類。
animation	true	如果設(shè)置為false，對(duì)話框?qū)⒉粫?huì)有動(dòng)畫效果。
allowOutsideClick	true	是否允許點(diǎn)擊對(duì)話框外部來關(guān)閉對(duì)話框。
allowEscapeKey	true	是否允許按下Esc鍵來關(guān)閉對(duì)話框。
showConfirmButton	true	是否顯示“Confirm（確認(rèn)）”按鈕。
showCancelButton	false	是否顯示“Cancel（取消）”按鈕。
confirmButtonText	"OK"	確認(rèn)按鈕上的文本。
cancelButtonText	"Cancel"	取消按鈕上的文本。
confirmButtonColor	"#3085d6"	確認(rèn)按鈕的顏色。必須是HEX顏色值。
cancelButtonColor	"#aaa"	取消按鈕的顏色。必須是HEX顏色值。
confirmButtonClass	null	確認(rèn)按鈕的自定義class類。
cancelButtonClass	null	取消按鈕的自定義class類。
buttonsStyling	true	為按鈕添加默認(rèn)的swal2樣式。如果你想使用自己的按鈕樣式，可以將該參數(shù)設(shè)置為false。
reverseButtons	false	如果你想反向顯示按鈕的位置，設(shè)置該參數(shù)為true。
showLoaderOnConfirm	false	設(shè)置為true時(shí)，按鈕被禁用，并顯示一個(gè)在加載的進(jìn)度條。該參數(shù)用于AJAX請(qǐng)求的情況。
preConfirm	null	在確認(rèn)之前執(zhí)行的函數(shù)，返回一個(gè)Promise對(duì)象。
imageUrl	null	為模態(tài)對(duì)話框自定義圖片。指向一幅圖片的URL地址。
imageWidth	null	如果設(shè)置了imageUrl參數(shù)，可以為圖片設(shè)置顯示的寬度，單位像素。
imageHeight	null	如果設(shè)置了imageUrl參數(shù)，可以為圖片設(shè)置顯示的高度，單位像素。
imageClass	null	自定義的圖片class類。
timer	null	自動(dòng)關(guān)閉對(duì)話框的定時(shí)器，單位毫秒。
width	500	模態(tài)窗口的寬度，包括padding值（box-sizing: border-box）。
padding	20	模態(tài)窗口的padding內(nèi)邊距。
background	"#fff"	模態(tài)窗口的背景顏色。
input	null	表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。
inputPlaceholder	""	input域的占位符。
inputValue	""	input域的初始值。
inputOptions	{} 或 Promise	如果input的值是select或radio，你可以為它們提供選項(xiàng)。對(duì)象的key代表選項(xiàng)的值，value代表選項(xiàng)的文本值。
inputAutoTrim	true	是否自動(dòng)清除返回字符串前后兩端的空白。
inputValidator	null	是否對(duì)input域進(jìn)行校驗(yàn)，返回Promise對(duì)象。
inputClass	null	自定義input域的class類。
參數(shù)	默認(rèn)值	描述

可以使用swal.setDefaults(customParams)方法來覆蓋默認(rèn)的參數(shù)，customParams是一個(gè)對(duì)象。

方法：

方法	描述
swal.setDefaults({Object})	當(dāng)你在使用SweetAlert2時(shí)有大量的自定義參數(shù)，可以通過swal.setDefaults({Object})方法來將它們?cè)O(shè)置為默認(rèn)參數(shù)。
swal.resetDefaults()	重置設(shè)置的默認(rèn)值。
swal.queue([Array])	提供一個(gè)數(shù)組形式的SweetAlert2參數(shù)，用于顯示多個(gè)對(duì)話框。對(duì)話框?qū)?huì)一個(gè)接一個(gè)的出現(xiàn)。
swal.close()? 或 swal.closeModal()	以編程的方式關(guān)閉當(dāng)前打開的SweetAlert2對(duì)話框。
swal.enableButtons()	確認(rèn)和關(guān)閉按鈕可用。
swal.disableButtons()	禁用確認(rèn)和關(guān)閉按鈕。
swal.enableLoading()? 或 swal.showLoading()	禁用按鈕并顯示加載進(jìn)度條。通常用于AJAX請(qǐng)求。
swal.disableLoading()? 或 swal.hideLoading()	隱藏進(jìn)度條并使按鈕可用。
swal.clickConfirm()	以編程的方式點(diǎn)擊確認(rèn)按鈕。
swal.clickCancel()	以編程的方式點(diǎn)擊取消按鈕。
swal.showValidationError(error)	顯示表單校驗(yàn)錯(cuò)誤信息。
swal.resetValidationError()	隱藏表單校驗(yàn)錯(cuò)誤信息。
swal.enableInput()	使input域可用。
swal.disableInput()	禁用input域。

三、彈出層sweetalert2的示例

轉(zhuǎn)自：SweetAlert 2 全網(wǎng)最詳細(xì)的使用方法
https://blog.csdn.net/dibr63585/article/details/102042483

把 js 復(fù)制出來 自己新建一個(gè)文件 然后 引用到 html 中

1. 帶有 確定和取消的 彈框

Swal.fire({type: 'warning', // 彈框類型title: '注銷帳號(hào)', //標(biāo)題text: "注銷后將無法恢復(fù)，請(qǐng)謹(jǐn)慎操作！", //顯示內(nèi)容 confirmButtonColor: '#3085d6',// 確定按鈕的 顏色confirmButtonText: '確定',// 確定按鈕的 文字showCancelButton: true, // 是否顯示取消按鈕cancelButtonColor: '#d33', // 取消按鈕的 顏色cancelButtonText: "取消", // 取消按鈕的 文字focusCancel: true, // 是否聚焦 取消按鈕reverseButtons: true // 是否 反轉(zhuǎn) 兩個(gè)按鈕的位置 默認(rèn)是 左邊 確定 右邊 取消 }).then((isConfirm) => {try {//判斷 是否 點(diǎn)擊的 確定按鈕if (isConfirm.value) {Swal.fire("成功", "點(diǎn)擊了確定", "success");}else {Swal.fire("取消", "點(diǎn)擊了取消", "error");}} catch (e) {alert(e);} });

2.帶有 展示 標(biāo)簽內(nèi)容 的彈框

?

var content = "無記錄"; var msg=""; //msg 是從外面?zhèn)魅氲臄?shù)據(jù) if (msg) {content = "<p style='color: red'>最近一次操作后的5小時(shí)內(nèi)有效</p> "+ "<p>可以使用 Ctrl +F 查找關(guān)鍵字</p>"+ "<table class='table_list'>"+ "<tr>"+ " <th class='js_tr_data'> 時(shí)間</th> <th>名稱</th> <th>密碼</th>"+ "</tr>"+ msg+ "</table>" } Swal.fire({title: '<strong>記錄</strong>',type: 'info',html: content, // HTMLfocusConfirm: true, //聚焦到確定按鈕showCloseButton: true,//右上角關(guān)閉 })

3.帶有定位 和 消失時(shí)間的 彈框

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

4. 自定義 第三方 css 的 彈框 (推薦使用?Animate.css?)

Swal.fire({title: 'Custom animation with Animate.css',animation: false,customClass: 'animated tada' })

5. 右上角 通知類 彈窗

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

6. 如何做一個(gè)自己的 通用模版

//定義模版 (可多次使用) var MyBox = Swal.mixin({toast: true,position: 'top-end',showConfirmButton: false,timer: 3000 }); //調(diào)用 MyBox.fire({type: 'success',title: 'successfully' });

四、彈出層sweetalert2的效果圖

?

總結(jié)

以上是生活随笔為你收集整理的js插件---弹出层sweetalert2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。