[F2E][Bootstrap]Window.Confirm(Bootbox.js對話視窗)

  • 4445
  • 0
  • F2E
  • 2016-04-23

避免使用者誤觸儲存或是刪除按鈕,我們會設計重要動作的按鈕點選(Click)時追加Window.confirm;但IE瀏覽器的Window.confirm的視窗比較傳統,

提升網站UI/UX的同時,我們也選了一個基於Bootstrap Modals 的對話視窗,她也是一個js library : Bootbox.js。

 

三種瀏覽器下window.confirm差異:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Confirm</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x;
    if (confirm("Press a button!") == true) {
        x = "You pressed OK!";
    } else {
        x = "You pressed Cancel!";
    }
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

1.IE:

畫面中央出現視窗(一整個和winform相同)

 

2.Chrome

從天空灑下.....視窗

3.Firefox

 背景還可以反灰!

 

但客戶專案要求的還是IE/Edge為主,就像今年可以用健保卡報稅,但僅限IE。

我們想在IE/Edge就可以有背景反灰,最好還帶一點動畫的效果。好,進入bootbox.js主題,美化網站對話視窗效果:

範例:

引用方式:

bootbox.js除了自己,還需要相依兩個js(bootstrap、jquery)及一個css(bootstrap.css)

<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS dependencies -->
    <link rel="stylesheet" type="text/css" href="../../Content/bootstrap.min.css">
</head>
<body>

    <p>Content here. <a class="alert" href=#>Alert!</a></p>

    <!-- JS dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="../../scripts/bootstrap.min.js"></script>

    <!-- bootbox code -->
    <script src="../../scripts/bootbox.min.js"></script>
    <script>
        $(document).on("click", ".alert", function(e) {
            bootbox.confirm("Are you sure?", function (result) {
            
            
            });
        });
    </script>
</body>
</html>

效果:

 

小結:

1.如果需要中文化,在語法中加上bootbox.setDefaults("locale", "zh_TW"); 是underline不是dash。

2.bootbox.js也支援window.alert,還可以客製Dialog。

3.License Type: MIT

4.其他類似的js library:

  • Kendo UI
  •  jQuery BlockUI

 

參考:

http://bootboxjs.com/