7、用 sweetalert2 取代 alert 的彈出視窗_Boostrap 響應式模板製作

<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, file 和 url.
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 的彈出視窗有任何問題請到討論區發帖。

8、用CSS處理(截斷)過長的文字

6、用fontawesome icon取代網頁小圖示，縮放不失真