TOP
首頁 > Boostrap 響應式模板製作 > 7、用 sweetalert2 取代 alert 的彈出視窗

7、用 sweetalert2 取代 alert 的彈出視窗

2020-09-29 353

相關文章

SweetAlert2是一個漂亮的、響應式的、可定制的和可訪問(WAI-ARIA)的JavaScript彈窗,沒有任何依賴。

無論你是在電腦、手機還是平板上,SweetAlert2都會在頁面上自動居中顯示,這看起來非常棒。SweetAlert2還可高度定制

7、用 sweetalert2 取代 alert 的彈出視窗

<link rel="stylesheet" href="css/sweetalert2.min.css">
<script src="js/sweetalert2.min.js"></script>
<script>
	swal.setDefaults({
		confirmButtonText: "確定",
		cancelButtonText: "取消"
	});
	
	function swal_html(title, html, type='info', btn='關閉'){
		swal({
		  title: title,
		  type: type,
		  html: html,
		  showCloseButton: true,
		  confirmButtonText: btn,
		})
	}
</script>	
在懶人包內已經有相關檔案,可以直接引用文件或是到SweetAlert2 官網下載最新檔案或參考教學文件,使用時調用swal_html函數,並傳入標題和HTML內容即可:
	<a href="#" onclick="swal_html('您好!', '歡迎來到<strong>we-shop.net</strong>')">趕快點我</a>

更多參數配置如下:

你可以使用這些參數,通過一個對象傳入到sweetAlert2中:

參數
預設值
描述
title null 彈窗HTML標題。可以通過對象的】title】屬性或第一個參數進行傳遞。
titleText null 彈窗的文字標題,防止HTML注入。
text null 彈窗的文字描述。可以通過對象的】text】屬性或第二個參數進行傳遞。
html null 彈窗的HTML描述。如果同時提供了【text】和【html】參數,【text】將被使用。
type null 彈窗的類型。SweetAlert2有5個內置類型,可以展示相應的圖標動畫: "warning"、"error"、 "success"、"info"和"question"。可以通過對象的】type】屬性或第三個參數進行傳遞。
target 'body' 添加彈窗到該容器元素中。
input null 輸入字段類型,可以是 text, email, password, number, tel, range, textarea, select, radio, checkbox, fileurl.
width '500px' 彈窗寬度,包括paddings(box-sizing:border-box)。單位可以是px%
padding 20 彈窗的padding
background '#fff' 彈窗的背景(CSS background屬性).
customClass null 彈窗的自定義css類
timer null 定時關閉彈窗的計時器,單位為ms(毫秒)。
animation true 如果設置為false,彈窗的CSS動畫將被禁用。
allowOutsideClick true 如果設置為false,用戶無法通過點擊彈窗外部關閉彈窗。
allowEscapeKey true 如果設置為false,用戶無法通過按下Escape鍵關閉彈窗。
allowEnterKey true 如果設置為false,用戶無法通過按Enter鍵或空格鍵確認彈窗,除非手動使確認按鈕獲得焦點。
showConfirmButton true 如果設置為false,【確認】按鈕將會隱藏。 當你使用自定義HTML描述時時,這可能很有用。
showCancelButton false 如果設置為true,【取消】按鈕將會顯示,用戶可以點擊取消按鈕關閉彈窗。
confirmButtonText 'OK' 使用該參數來修改【確認】按鈕的顯示文字。
cancelButtonText 'Cancel' 使用該參數來修改【取消】按鈕的顯示文字。
confirmButtonColor '#3085d6' 使用該參數來修改【確認】按鈕的背景顏色(必須是十六進制值)。
cancelButtonColor '#aaa' 使用該參數來修改【取消】按鈕的背景顏色(必須是十六進制值)。
confirmButtonClass null 可以為【確認】按鈕設置自定義類
cancelButtonClass null 可以為【取消】按鈕設置自定義類
buttonsStyling true 預設按鈕樣式使用swal2的樣式,如果你想要使用自己的CSS類(例如Bootstrap類),將該參數設置為false
reverseButtons false 如果想要調換預設按鈕的位置(將【確認】按鈕放到右邊),將該參數設置為true
focusCancel false 如果想要在預設情況下【取消】按鈕獲取焦點,將該參數設置為true
showCloseButton false 設置為true,在彈窗的右上角顯示關閉按鈕。
showLoaderOnConfirm false 設置為true會禁用按鈕並顯示loading,適用於AJAX請求。
preConfirm null 確認之前執行的函數,應返回Promise,請參考使用案例
imageUrl null 為彈窗添加一個自定義圖標。這個參數是一個字符串圖片路徑。
imageWidth null 如果設置了imageUrl,你可以指定imageWidth來設置圖標的寬度,單位為px。
imageHeight null 設置自定義圖標的高度,單位為px。
imageClass null 設置自定義圖標的CSS類
inputPlaceholder '' 輸入框的placeholder
inputValue '' 輸入框的初始值。
inputOptions {} or Promise 如果input參數設置為"select""radio",你可以設置該參數。對象key將表示項的值,對象value將表示項的顯示文字
inputAutoTrim true 自動刪除字符串首尾兩端的空格。設置該參數為false會禁用自動去空格。
inputAttributes {} 添加到輸入框的HTML input元素屬性(例如min, max, autocomplete, accept)。對象key將表示屬性名稱,對象值將表示屬性值。
inputValidator null 輸入框的驗證器,應返回Promise,請參考使用案例
inputClass null 輸入框的自定義CSS類。
progressSteps [] 進度步驟對彈窗隊列很有用,請參考使用示例
currentProgressStep null 當前啟用的進度步驟,預設值是swal.getQueueStep()
progressStepsDistance '40px' 進度步驟之間的距離。
onOpen null 彈窗打開時運行的函數,彈窗DOM元素作為第一個參數提供給該函數。
onClose null 彈窗關閉時運行的函數,彈窗DOM元素作為第一個參數提供給該函數。

你可以使用swal.setDefaults(customParams)重新定義預設參數。

如果你對7、用 sweetalert2 取代 alert 的彈出視窗有任何問題請到討論區發帖。