SweetAlert入門教程

SweetAlert入門教程 前些天在做後台管理系統，在使用者互動這塊（彈窗、提示相關），用了一款還不錯的外掛程式SweetAlert(一款原生js提示框,允許自訂，支援設定提示框標題、提示類型、確認取消按鈕文本、點擊後回呼函數等等), 效果挺好的，簡單寫一下用法。

把大象裝冰箱，總共分三步: 第一步：下載（引用） 有三種方式可供選擇：

1.通過bower安裝：

$ bower install sweetalert

2.通過npm安裝

$ npm install sweetalert

3.我用的是最簡單粗暴的方式3：

下載sweetAlert的CSS和JavaScript檔案。地址點我
從github上拿下來的sweetalert-master是有帶例子的，我們只需要其中兩個檔案：
dist下的sweetalert.min.js和sweetalert.css（下面引用路徑是我自己的）。

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

第二步： 需要在頁面載入完成後調用sweetalert函數：

swal({    title: "OK!",        text: "Nice to meet you!",    type: "success",        confirmButtonText: "HaHa" })

第三步，就是寫需要實現的具體功能了。下面，我來舉幾個栗子（代碼直接從編輯器拿過來，模態框的圖懶得貼了，效果可以自己試試。）： html代碼：

基本資料：<button id="demo1">試一試</button>  <br />帶有文字的標題：<button id="demo2">試一試</button>  <br />成功提示：<button id="demo3">試一試</button>  <br />帶有“確認”按鈕的功能的警告訊息：<button id="demo4">試一試</button>  <br />通過傳遞參數，您可以執行一些其他的事情比如“取消”。：<button id="demo5">試一試</button>  <br />一個有自訂表徵圖的訊息：<button id="demo6">試一試</button>  <br />自訂HTML資訊：<button id="demo7">試一試</button>  <br />更換“提示”功能: <button id="demo9">試一試</button>  <br />使用載入程式（例如，用於AJAX請求）: <button id="demo10">試一試</button>  <br />

js代碼(原諒我可恥的用了原生)：

document.getElementById("demo1").onclick = function() {    swal("這是一個資訊氣球!")};document.getElementById("demo2").onclick = function() {    swal("這是一個資訊氣球!", "很漂亮，不是嗎。")};document.getElementById("demo3").onclick = function() {    swal("幹得好", "你點擊了按鈕!", "success")};document.getElementById("demo4").onclick = function() {    swal({        title: "你確定。",        text: "您將無法恢複這個虛構的檔案。",        type: "warning",        showCancelButton: true,        confirmButtonColor: "#DD6B55",        confirmButtonText: "是的，刪除。",        closeOnConfirm: false    }, function() {        swal("刪除!", "您的虛構檔案已被刪除。", "success")    })};document.getElementById("demo5").onclick = function() {    swal({        title: "你確定。",        text: "您將無法恢複這個虛構的檔案。",        type: "warning",        showCancelButton: true,        confirmButtonColor: "#DD6B55",        confirmButtonText: "是的，刪除。",        cancelButtonText: "不，取消",        closeOnConfirm: false,        closeOnCancel: false    }, function(isConfirm) {        if (isConfirm) {            swal("刪除!", "您的虛構檔案已被刪除。", "success")                               } else{            swal("取消!", "您的虛構檔案是安全的。", "error")        }    })};document.getElementById("demo6").onclick = function() {    swal({        title: "Sweet!",        text: "這裡是自訂映像!",        imageUrl: "img/thumbs-up.jpg"    })};document.getElementById("demo7").onclick = function() {    swal({        title: "HTML <small>標題</small>!",        text: "A custom <span style='color:pink'>html<span> message.",        html:　true    })};document.getElementById("demo8").onclick = function() {    swal({        title: "自動關閉警報!",        text: "2秒後自動關閉",        timer: 2000,        showConfirmButton: false    })};document.getElementById("demo9").onclick = function() {    swal({        title: "請輸入。",        text: "填寫一些資訊",        type: "input",        showCancelButton: true,        closeOnConfirm: false,        animation: "slide-from-top",        inputPlaceholder: "請輸入..."    }, function(inputValue) {        if (inputValue === false) {            return false;        }        if (inputValue === "") {            swal.showInputError("內容不可為空。");            return false;        }        swal("Nice!", "你輸入的是：" + inputValue, "success")    })};document.getElementById("demo10").onclick = function() {    swal({        title: "AJAX請求執行個體",        text: "提交運行Ajax請求",        type: "info",        showCancelButton: true,        closeOnConfirm: false,        showLoaderOnConfirm: true    }, function() {        setTimeout(function() {            swal("AJAX請求完成。");        }, 2000)    })};

下面說一些可能會頻繁使用的配置項：

參數	預設值	描述
title	null (required)	彈窗的標題。可以通過對象的”title”屬性或第一個參數進行傳遞。
text	null	彈窗的描述。可以通過對象的”text”屬性或第二個參數進行傳遞。
type	null	彈窗的類型。SweetAlert有四個內建類型，可以展示相應的表徵圖動畫: “warning”,”error”, “success” and “info”。你也可以設定為”input”類型變成輸入彈窗。可以通過對象的”type”屬性或第三個參數進行傳遞。
showCancelButton	false	如果設定為true，“取消”按鈕將會顯示，使用者點擊取消按鈕會關閉彈窗。
showConfirmButton	true	如果設定為false，“確認”按鈕將會隱藏。為了良好的使用者體驗，最好你設定了定時關閉或者allowOutsideClick為true時才將該參數設定為false。
confirmButtonText	“OK”	使用該參數來修改“確認”按鈕的顯示文本。如果showCancelButton設定為true，確定按鈕的顯示文本將會自動使用“Confirm”而不是“OK”。
confirmButtonColor	“#AEDEF4”	使用該參數來修改“確認”按鈕的背景顏色（必須是十六進位值）。
cancelButtonText	“Cancel”	使用該參數來修改“取消”按鈕的顯示文本。
imageUrl	null	為彈窗添加一個自訂的表徵圖。這個參數是一個字串圖片路徑。
imageSize	“80x80”	如果設定了imageUrl，你可以使用像素（px）指定圖片大小來描述你想要多大的表徵圖。在一個字串中使用“x”來分割兩個值，第一個值是寬度，第二值是高度。
timer	null	自動關閉彈窗的定時器。單位為毫秒（ms）。
html	false	如果你設定為true，參數title和參數text的值將會被html解析顯示而不是純文字。（如果你擔心被XSS攻擊那就設定為false。）
inputType	“text”	當使用type: “input”時，該參數用來改變輸入的類型(例如：如果你想讓使用者輸入密碼，這可能是有用的)。
inputPlaceholder	null	當使用輸入類型時，你可以使用placeholder來協助使用者明白應該輸入什麼內容。

好啦，就這樣吧。其實sweetalert2也已經出了，支援響應式，功能也更加強大，但本著夠用就好的原則，還是先用的第一版。 參考：

源地址：http://t4t5.github.io/sweetalert/

中文：http://mishengqiang.com/sweetalert/

github地址：https://github.com/t4t5/sweetalert