近期意外發現一個簡單方便的前端套件，sweetalert2（官方連結）。

SweetAlert2是一個很漂亮的響應式套件，且是純javascript，不需依賴jQuery，並支持jQuery、React、Angular、Vue.js

 

引用函數的 CDN 如下：

1
 
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

 

只要透過以下簡單的一行指令即可作出如下圖的彈出視窗，算是非常簡易的前端套件。

1
 
swal("這裡是標題", "這裡是內文", "success");

 

image

 

完整的網站範例程式碼如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!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" />
    <title>Hello, world!</title>
</head>

<body>
    <div class="col-md-12">
        <input type="button" class="btn btn-primary" value="點我!!!" />
    </div>

    <!--引用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>

 

 

 

arrow
arrow
    文章標籤
    web
    全站熱搜
    創作者介紹
    創作者 Lung-Yu,Tsai 的頭像
    Lung-Yu,Tsai

    Lung-Yu,Tsai 的部落格

    Lung-Yu,Tsai 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄