sweetalert

sweetalert目前主要有sweetalert和sweetalert2兩個版本。

用戶能夠去對應的網站下載不一樣的版本。將對應版本的js和css文件引入到HTML頁面中。如：

<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">

後，方可以使用。

    SweetAlert2：A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.

         一.函數方式

         例子：

        eg01：彈出基本的提示，

swal('Hello world');

        eg02：彈出錯誤提示，

swal('title', 'Something went wrong!', 'error');

   swal()裏面能夠放三個參數，第一參數是彈窗標題，第二個參數是彈窗內容，第三個參數是彈窗的類型（彈窗類型不一樣，彈窗的圖標不一樣）。這裏 swal 中的第三個參數‘error’，指定了彈框的類型types，還能夠改爲‘success’/‘warning’／‘info’／‘question’，下圖是不一樣types的彈窗的圖標：

          二.對象方式

         eg3：處理彈出框的處理結果，swal({....}).then(function(){...},function(dismiss){...})。點擊確認按鈕事後，系統會默認執行第一個function（）。dismiss的意思是關掉對話框，關掉對話框執行第二個function（dismiss）。

swal({
	title: '你肯定嗎？',//標題
	text: '你將不能夠恢復被刪除的文件',//內容
	type: 'warning',//彈窗類型
	showCancelButton: true,//是否顯示刪除按鈕，默認值是false（不顯示），true（顯示）
	confirmButtonText: '確認刪除',//確認按鈕上的字
	cancelButtonText: '取消',//取消按鈕上面的字
}).then(function() {
	swal(
		'刪除成功!',
		'你的文件被刪除',
		'success',
	)
}, function(dismiss) {
	// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
	if (dismiss === 'cancel') {
		swal(
			'取消操做',
			'你取消了該操做',
			'error'
		)
	}
})

      （插入gif動態圖片）

        處理關閉對話框事件：當一個彈窗被用戶關閉時，關閉彈窗的方式會被dismiss記錄，數據類型是string類型：

string	描述	相關的配置項
'overlay'	用戶點擊overlay（彈窗以外的窗體部分）	allowOutsideClick
'cancel'	用戶點擊cancel按鈕	showCancelButton
'close'	用戶點擊close按鈕	showCloseButton
'esc'	用戶按Esc鍵	allowEscapeKey
'timer'	倒計時結束而且彈窗自動被關閉	timer（計時器）

        若是未處理dismiss的事件，控制檯將報錯（彈窗正常彈出/關閉）。爲了不這種狀況，一般會添加處理函數function（dismiss）{ }或者使用 .catch(swal.noop)作簡單快速處理錯誤的方式。

        sweetalert的配置項：

sweetalert2的相關配置項

argument（參數）	默認值	描述
title	null	modal的title，可使用HTML標籤，它能夠放在函數的第一個參數中也能夠添加到對象中的「title」
ttileText	null	純文本的title
text	null	modal的描述。它能夠放在函數的第二個參數中也能夠添加到對象中的「text」
html	null	modal的HTML描述。若是同時提供了text和html參數，「text」將被使用
type	null	modal的類型。Sweetalert2由五個內置類型 warning、info、success、error、question，各自有各自的動畫效果。它能夠放在函數的第三個參數中也能夠添加到對象的「type」
target	‘body’	用於添加modal框的容器元素
input	null	輸入字段類型，分爲text、email、password、number、tel、range、textarea、select、radio、checkbox、file和url
width	500px	modal窗口寬度，包括內邊距（box-sizing:border-box）。能夠px或者%形式。
padding	20	modal窗口的內邊距
background	#fff	modal框窗口的背景（css的背景屬性）
customClass	null	modal框的custom CSS類
timer	null	modal框的自動關閉計時器。表示的是毫秒
animation	true	動畫效果。若是設置爲false，modal框的CSS動畫效果將失效。
allowOutSideClick	true	點擊模態框之外的地方是否關閉模態框。true（默認）關閉、false不關閉
allowEscapeKey	true	按Esc鍵是否關閉模態框。true（默認）關閉、false不關閉
allowEnterKey	true	默認爲true，按空格鍵或者回車鍵表示確認，當設爲false時，只能按「確認按鈕「來確認。
showConfirmButton	true	設置爲false時，「confirm」按鈕不會被顯示。當使用html參數時可能會有用的。
showCancelButton	false	設置爲true時，「cancel」按鈕將被顯示，用戶能夠點擊該按鈕關閉模態框
confirmButtonText	「OK」	用來改變confirm按鈕的文字
cancelButtonText	「cancel」	用來改變cancel按鈕上的文字
confirmButtonColor	「#3085d6」	確認按鈕的背景色（必須是十六進制）
cancelButtonColor	「#aaa」	刪除按鈕的背景色（必須是十六進制）
confirmButtonClass	null	A custom CSS class for the "Confirm"-button.
canceButtonClass	null	A custom CSS class for the "Cancel"-button.
confirmButtonAriaLabel	' '	Use this to change the aria-label for the "Confirm"-button.
canceButtonAriaLabel	' '	Use this to change the aria-label for the "Cancel"-button.
buttonsStyling	true	將默認樣式應用於按鈕，若是你想用本身的樣式類（如 Bootstrap樣式類），將該參數值設爲false
reverseButtons	false	若是要反轉默認按鈕位置（「確認」 按鈕在右側），請設置爲true
focusConfirm	true	若是要按標籤順序對第一個元素進行聚焦，而不是默認狀況下將「確認」按鈕設置爲false。
focusCancel	false	若是要在默認狀況下對「取消」按鈕進行聚焦，請設置爲true。
showCloseButton	false	若是想在右上角顯示close按鈕，設置成true
closeButtonArialLabel	"Close this dialog"	Use this to change the aria-label for the close button.
showLoaderOnConfirm	false	設置爲true可禁用按鈕，並顯示正在加載的內容。 將其與preConfirm參數結合使用。
preConfirm	null	確認以前執行的功能，應返回Promise，請參閱使用示例。
imageUrl	null	爲模態框添加圖像。 應該包含一個帶有圖像路徑或URL的字符串。
imageWidth	null	若是設置了imageUrl，您能夠指定imageWidth，單位px
imageHeight	null
imageAlt	‘ ’	自定義圖片的代替字（圖片不顯示時顯示該字）
imageClass	null	圖片的自定義CSS類
inputPlaceholder	‘ ’	input框中的預顯示自斷
inputValue	‘ ’	input框中的初始值
inputOptions	{ } or Promise	input參數被設置爲select（多選）or radio（單選），能夠提供選擇項。對象鍵值對中的key表示選項值，對象鍵值對中的values表示選項文本值
inputAutoTrim	true	自動將input值的字符串兩端的空格刪除
inputAttributes	{ }	HTML input屬性（如：min，max，autocomplete，accept ），這些被加入input框，對象key表示屬性名，對象values表示屬性值
inputValidator	null	input框的校驗，should return Promise, see usage example.
inputClass	null	爲input框自定義CSS樣式類
progressSteps	[ ]	Progress steps, useful for modal queues, see usage example.
currentProgressStep	null	Current active progress step. The default is swal.getQueueStep().
progressStepsDistance	"40px"	進度條之間的間距
onOpen	null	當模態框打開是運行的函數，提供模態框DOM元素做爲第一個參數
onClose	null	當模態框關閉時運行的函數，提供DOM元素做爲第一個參數
useRejections	true	Determines whether dismissals (outside click, cancel button, close button, esc key) should reject, or resolve with an object of the format { dismiss: reason }. Set it to falseto get a cleaner control flow when using await, as explained in #485.

        你可使用swal.setDefaults(customParams)來從新定義默認參數，這裏的customParams是一個object對象。

        sweetAlert的方法：

method	description
swal.isVisible()	肯定模態框是否顯示
swal.setDefaults（｛Object｝）	若是最後在調用SweetAlert2時使用了不少相同的設置，能夠在程序開始時使用setDefaults一次性設置！
swal.resetDefaults()	從新設置默認值
swal.colse() or swal.closeModal()	用編程的方式關閉當前打開的SweetAlert2的模態框
swal.getTitle()	獲取模態框的title
swal.getContent()	獲取模態框的content
swal.getImage()	獲取image
swal.getConfirmButton()	獲取「Confirm」按鈕
swal.getCancelButton()	獲取「Cancel」按鈕
swal.enableButtons()	啓用Confirm和Cancel按鈕
swal.disableButtons()	禁用Confirm和Cancel按鈕
swal.enableConfirmButton()	僅啓用Confirm按鈕
swal.disableConfirmButton()	僅禁用Confirm按鈕
swal.enableLoading() or swal.showLoading()	禁用按鈕而且顯示加載程序。這對AJAX請求頗有用
swal.disableLoading() or swal.hideLoading()	啓動按鈕而且隱藏加載程序
swal.clickConfirm()	用編程的方式點擊「確認」按鈕
swal.clickCancel()	用編程的方式點擊「刪除」按鈕
swal.showValidationError(error)	顯示校驗錯誤提示
swal.resetValidationError()	隱藏校驗錯誤提示
swal.getInput()	獲取input框的DOM節點，這個方法和input參數一塊兒使用
swal.disableInput()	禁用input框，被禁用的input框元素不可用而且不可被點擊
swal.enableInput()	啓動input
swal.queue([Array])	Provide array of SweetAlert2 parameters to show multiple modals, one modal after another or a function that returns alert parameters given modal number. See usage example.
swal.getQueueStep()	Get the index of current modal in queue. When there's no active queue, null will be returned.
swal.insertQueueStep()	Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue.
swal.deleteQueueStep(index)	Delete a modal at index from queue.
swal.getProgressSteps()	Progress steps getter.
swal.setProgressSteps([])	Progress steps setter.
swal.showProgressSteps()	Show progress steps.
swal.hideProgressSteps()	Hide progress steps.
swal.isValidParameter({String})	Determine if parameter name is valid.