[前端] 快速上手讓人驚豔的JS alert、confirm dialog - SweetAlert2 (含整合ASP.net WebForm範例碼)

Quickly use SweetAlert2

前言

漂亮酷炫外加動畫效果的JS alert、confirm dialog元祖SweetAlert,目前出了幾種分支:

1:SweetAlert for Bootstrap (Bootstrap樣式的SweetAlert)

2:ngSweetAlert (AngularJS版本的SweetAlert)

3:本文要介紹的SweetAlert2

SweetAlert2和元祖有以下幾個差別:

1.元祖要另外設定參數才支援html顯示內容

swal({
  title: '<span class="title">Title</span>',
  text: '<span class="text">HTML description</span>',
  html: true /*多給此參數*/
})

SweetAlert2預設支援html顯示內容

swal({
  title: '<span class="title">Title</span>',
  html: '<span class="text">HTML description</span>'
});

2.Confirm dailog元祖的「確定」按鈕在右方,SweetAlert2的「確定」按鈕在左方(跟Chrome瀏覽器同樣)

3.元祖的icon有四種,SweetAlert2改稱為type則多一個"question",在confirm dailog很派上用場

實作

SweetAlert、SweetAlert2這兩個都無須jQuery就可以執行,好處是更換jQuery版本不會影響執行
(我想現在很多人工作上專案一定都會用到jQuery)

引用SweetAlert2檔案有兩種選擇:

先到官方CDN

1.網頁只引用sweetalert2.all.min.js檔,不引用.css

2.網頁分別引用sweetalert2.css和sweetalert2.js

先看SweetAlert2最簡單的alert範例程式碼↓

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />  
    <!--引用css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.css" />
</head>
<body>

    <input type="button" value="click me" />

    <!--引用jQuery-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <!--引用SweetAlert2.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input:button").click(function () {
                //alert範例
                swal("已寄出新密碼", "請至您的信箱查收新的登入密碼", "success");

            });
        });
    </script>
</body>
</html>

Demo Code:https://jsfiddle.net/ShadowKao/Lhsq72fd/

以下紅框是幾個常用的參數

預設確定按鈕在左邊、取消按鈕在右邊(和Chrome一樣),如果兩個按鈕位置想對調的話,設定 reverseButtons:true 即可

預設確定按鈕文字是"OK",如果想改成中文的話,就要使用明確參數的呼叫型式↓

swal({
                    title: "已寄出新密碼",
                    html: "請至您的信箱查收新的登入密碼",
                    type: "success",
                    confirmButtonText:"確定"/*改這裡*/
});

或使用預設值寫法↓

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />  
    <!--引用css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.css" />
</head>
<body>

    <input type="button" value="click me" />

    <!--引用jQuery-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <!--引用SweetAlert2.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.3/sweetalert2.js" type="text/javascript"></script>
    <script type="text/javascript">
        //自訂預設值
        swal.setDefaults({
            confirmButtonText: "確定",
            cancelButtonText: "取消"
        });
        //swal.resetDefaults();//清空自訂預設值


        $(function () {
            $("input:button").click(function () {
                //alert範例
                swal("已寄出新密碼",
                    "請至您的信箱查收新的登入密碼",
                    "success");

            });
        });
    </script>
</body>
</html>

執行結果:

以上為alert dialog的用法,已經足以應付大部份需求

接下來介紹confirm dialog用法,要使用confirm dialog有幾個參數一定要設定

2017.11.20追記:v7版之後的「確認」、「取消」callback寫法有改變(舊的要寫兩個function,新寫法合併到同一個function),本文範例已配合調整

<html>
<body>

    <input type="button" value="click me" />

    <!--引用jQuery-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <!--引用SweetAlert2.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.all.js"></script>
    <script type="text/javascript">
        //自訂預設值
        swal.setDefaults({
            confirmButtonText: "確定",
            cancelButtonText: "取消"
        });
        //swal.resetDefaults();//清空自訂預設值


        $(function () {
            $("input:button").click(function () {
                //confirm dialog範例
                swal({
                    title: "確定刪除?",
                    html: "按下確定後資料會永久刪除",
                    type: "question",
                    showCancelButton: true//顯示取消按鈕
                }).then(
                    function (result) {
                        if (result.value) {
                            //使用者按下「確定」要做的事
                            swal("完成!", "資料已經刪除", "success");
                        } else if (result.dismiss === "cancel")
                        {
                             //使用者按下「取消」要做的事
                            swal("取消", "資料未被刪除", "error");
                        }//end else  
                    });//end then 
            });
        });
    </script>
</body>
</html>

執行結果:

其中dismiss為使用者關閉dialog原因,“cancel”表示使用者按下「取消」按鈕,其它請見官網(反正很少用XD)

ASP.net WebForm如何整合confirm dialog呢?

1.改採用ASP.net MVC開發XD,單純乾淨的Html Code搭配jQuery Ajax來呼叫Server端的Controller

2.以下範例程式碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page3.aspx.cs" Inherits="Page3" %>

<html>
<body>
    <form id="form1" runat="server">
        <%--  確保網頁上至少放置一個LinkButton控制項
          沒有的話自己放一個Text為空值或空字串的LinkButton
          目的讓網頁自動產生__doPostBack()的js函數
        --%>
        <asp:LinkButton ID="LinkButton1" runat="server" />

        <%--OnClientClick="return false",避免使用者一點擊按鈕就postback--%>
        <asp:Button ID="btnSubmit" runat="server" Text="submit form" OnClick="btnSubmit_Click" OnClientClick="return false" />

        <!--引用jQuery-->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
        <!--引用SweetAlert2.js-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.all.js"></script>
        <script type="text/javascript"> 
            $(function () {
                $("#<%= btnSubmit.ClientID%>").click(function () {
                    myConfirm();
                });
            });

            //自訂預設值
            swal.setDefaults({
                confirmButtonText: "確定",
                cancelButtonText: "取消"
            });
            //swal.resetDefaults();//清空自訂預設值
             
            function myConfirm() {

                let btnName = $("input#<%= btnSubmit.ClientID%>").attr("name");
                //confirm dialog範例
                swal({
                    title: "確定刪除?",
                    html: "按下確定後資料會永久刪除",
                    type: "question",
                    showCancelButton: true//顯示取消按鈕
                }).then(
                    function (result) {
                        if (result.value) {
                            //使用者按下「確定」要做的事
                            //呼叫ASP.net自動產生的JS函數,第二個參數不給值避免網頁出錯
                            __doPostBack(btnName, "");
                        } else if (result.dismiss === "cancel") {
                            //使用者按下「取消」要做的事
                            swal("取消", "資料未被刪除", "error");
                        }
                    }//end function
                );//end then 
            }//end function myConfirm()

        </script>
        <%--ASP.net WebForm的話,要在</form>之前載入所需的JS檔--%>
    </form>
</body>
</html>

Code-behind事件程式碼

protected void Page_Load(object sender, EventArgs e)
{

} 
protected void btnSubmit_Click(object sender, EventArgs e)
{
            Response.Write("執行btnSubmit_Click事件");

            //在</form>之前輸出Javascript
            string js= @"swal('完成!', '資料已經刪除', 'success');";
            ClientScript.RegisterStartupScript(Page.GetType(), Guid.NewGuid().ToString(),js,true); 
}
 

以上就是alert、confirm dialog的用法,比起原生陽春的window.alert、window.confirm,已經能夠應付大部份需求

SweetAlert2其實還能再更進階做出花俏的行為

例如讓使用者輸入資料step by step,不過2017/03/03此帖作者表明目前不支援回「上一步」

小遺憾所以就不詳細介紹,請見線上範例程式碼↓

Demo Code: http://jsfiddle.net/ShadowKao/aszx7zLn/

導入實際工作專案,如果卡關需要其他參數、功能的話,請上官網查詢: SweetAlert2

2017.10.24補充

SweetAlert2預設不支援IE,如果在IE上運行的話,會出現錯誤訊息「SweetAlert2: This package requires a Promise library, please include a shim to enable it in this browser 」

要讓SweetAlert2支援IE11的話,得先到此文章:Migration from SweetAlert to SweetAlert2

下載core.js檔,然後

1.網頁<head>標籤裡面寫下:<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 強制IE使用最新版文件模式

2.網頁先引用core.js

3.再引用sweetalert2.js即可順利在IE上執行SweetAlert2

除了引用core.js外,另一個引用選擇是到官網:https://sweetalert2.github.io

找到下方紅框處,把該.js抓下來引用在網頁上也可以

2017.11.05補充

分享自己在工作上使用SweetAlert2的confirm dialog用法(畢竟用原生呼叫方式太囉嗦)

先新增一個.js檔 sweetalert2.MySetting.js

//自訂預設值
swal.setDefaults({
    confirmButtonText: "確定",
    cancelButtonText: "取消"
});
//swal.resetDefaults();//清空自訂預設值

//封裝SweetAlert2的confirm
function swalConfirm(title, html, callbackFunc) {
    swal({
        title: title,
        html: html,
        type: "question",
        showCancelButton: true//顯示取消按鈕
    }).then(function(result)
      {
        if(result===true)
        {//使用者按下「確定」要做的事
          callbackFunc();
        } 
      }//end function
    );//end then

}//end function

完整網頁程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>SweetAlert2 Confirm</title>
</head>
<body>

    <input type="button" value="show confirm" />

    <!--引用jQuery核心-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--讓SweetAlert2支援 IE-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
    <!--引用SweetAlert2-->
     <!--引用SweetAlert2.js-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.0.0/sweetalert2.all.js"></script>
    <!--引用自訂的SweetAlert2設定--> 
    <script src="Scripts/sweetalert2.MySetting.js"></script>
    <!--page inline script-->
    <script type="text/javascript">
        $(function () {
            $("input:button").click(function () {
                  
                //使用方式 
                swalConfirm("確定刪除?", "", function () 
                 {
                     
                    //Loading畫面,出處:http://malsup.com/jquery/block/
                    $.blockUI(); 
                    $.ajax({
                        url: "@Url.Action("MyAction", "MyController")",
                        method: "post",
                        data: { },
                        success: function (result) {
                              
                        }, complete: function () {
                            $.unblockUI();
                        }

                    });//End ajax
                   
                    
                }//end function 
                );//end swalConfirm 


            });//end click event
        });
    </script>
</body>
</html>

2017.11.6補充

如果直接呼叫swal();出現錯誤:Uncaught TypeError: Cannot read property 'querySelector' of null

<script type="text/javascript"> 
    swal("title", "content", "success");  
</script>

改成以下即可↓

<script type="text/javascript"> 
 window.onload = function () {
 swal("title", "content", "success");  

 }
 /*
 如果有引用jQuery的話,寫在domready事件應該也行
 $(function(){
  swal("title", "content", "success");  

 });
 */  
</script>

另外,如果從iframe要把SweetAlert顯示在父視窗的話↓

 //父視窗必須有引用SweetAlert.js前提下
 window.parent.swal("title", "content", "success");  
 

2017.12.5 追記

以往傳統在alert()之後的導頁寫法↓

alert("message");window.location.href="http://tw.yahoo.com";

換成SweetAlert2後,導頁動作要寫在callback function,範例如下:

<html> 
<body>

    <input type="button" value="click me" />

    <!--引用jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--引用SweetAlert2-->
    <script type="text/javascript" src="https://unpkg.com/sweetalert2@7.0.7/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input").click(function () {
                swal("title", "content", "info").then(function (result) {
                    //導頁寫在此
                    window.location.href = "http://tw.yahoo.com";
                }); 
            }); 
        });
    </script>
</body>
</html>

↓這是錯誤的SweetAlert導頁寫法,會變成SweetAlert一彈跳出來,畫面馬上導頁

<html> 
<body>

    <input type="button" value="click me" />

    <!--引用jQuery-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--引用SweetAlert2-->
    <script type="text/javascript" src="https://unpkg.com/sweetalert2@7.0.7/dist/sweetalert2.all.js"></script>
    <script type="text/javascript">
        $(function () {
            $("input").click(function () {
                swal("title", "content", "info");
                //緊鄰swal()之後執行導頁
                window.location.href = "http://tw.yahoo.com";
            }); 
        });
    </script>
</body>
</html>

 

 

 

相關文章

SweetAlert2中文說明手冊 —— 一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JavaScript弹窗