sweetalert

下載&安裝

Bower

$ bower install sweetalert

npm

$ npm install sweetalert

 點選下載

使用

1. 引用必要的css、js檔案初始化外掛
2. 頁面載入完成後呼叫sweetaler函式

上圖效果程式碼如下

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});
 

彈出框的基本使用

swal("Good job!", "You clicked the button!", "success");

第一個引數模式的標題，第二個是它的文字，第三個是新增圖示到框中“info”、“success”、“warning”、“error”；上面的例子可以用一個物件作為唯一引數來寫，如下

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});

兩種語法可以結合使用，此處再加上第四個引數button，為按鈕設定文字。當button：true時除了預設確認按鈕，還會多出一個取消按鈕。

swal("Good job!", "You clicked the button!", "success", {
  button: "Aww yiss!",
});

跟蹤使用者互動

swal("Click on either the button or outside the modal.")
.then((value) => {
  swal(`The returned value is: ${value}`);
});

點選確認按鈕，則為“true”，點選取消或者彈出框外為null。

jNotify

jNotify是一款簡單且優秀的jQuery結果提示框外掛，相容性很好，支援定位提示框位置，支援內容更改，可設定顯示與消失時間不影響後續操作。

點選下載

jNotify的使用非常簡單。

$(function(){ 
   $(element).click(function(){ 
       jSuccess(message,{option}); 
   });   
});

它支援三種呼叫方式，jSuccess()，jError()，jNotify。message為提示資訊內容，支援html標籤；option為引數配置項，不用則為預設配置。

具體使用例子

$(function() { 
    $("element").click(function() { 
        jSuccess("操作成功 + <strong>！</strong> ", { 
            VerticalPosition: 'center', 
            HorizontalPosition: 'center' 
        }); 
    }); 
    $("element").click(function() { 
        jNotify("注意：<strong>這是提醒資訊！</strong>"); 
    }); 
    $("element").click(function() { 
        jError("操作失敗，請重試!!"); 
    }); 
    $("element").click(function() { 
        jSuccess("操作成功，2秒後顯示下一個提示框!!", { 
            TimeShown: 2000, 
            onClosed: function() { 
                jNotify("注意：點選這裡顯示下一個提示框", { 
                    VerticalPosition: 'top', 
                    autoHide: false, 
                    onClosed: function() { 
                        jError("出錯啦! 演示結束,<br /> 請點選背景層關閉提示框。", { 
                            clickOverlay: true, 
                            autoHide: false, 
                            HorizontalPosition: 'left' 
                        }); 
                    } 
                }); 
            } 
        }); 
    }); 
});

jNotify詳細配置

autoHide : true,                // 是否自動隱藏提示條
clickOverlay : false,            // 是否單擊遮罩層才關閉提示條
MinWidth : 200,                    // 最小寬度
TimeShown : 1500,                 // 顯示時間：毫秒
ShowTimeEffect : 200,             // 顯示到頁面上所需時間：毫秒
HideTimeEffect : 200,             // 從頁面上消失所需時間：毫秒
LongTrip : 15,                    // 當提示條顯示和隱藏時的位移
HorizontalPosition : "right",     // 水平位置:left, center, right
VerticalPosition : "bottom",     // 垂直位置：top, center, bottom
ShowOverlay : true,                // 是否顯示遮罩層
ColorOverlay : "#000",            // 設定遮罩層的顏色
OpacityOverlay : 0.3,            // 設定遮罩層的透明度
onClosed:fn            //關閉提示框後執行函式，可以再次呼叫其他jNotify。如上面的三個依次呼叫。

toastr

totastr是一個用JavaScript庫建立非阻塞的頁面訊息提醒，有四種通知模式：info、success、warning、error。基本效果如下

下載&安裝

NuGet Gallery

Install-Package toastr

Bower

bower install toastr

npm

npm install --save toastr

使用

引入css、js檔案，再呼叫toastr函式。

//顯示一個警告,沒有標題
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
//顯示一個成功,標題
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
//顯示錯誤標題
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
//使用動畫清除當前的toatrs
toastr.clear()
//立刻清除當前的toatrs不是用動畫
toastr.remove()
//全域性引數配置
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})

配置

//引數設定，若用預設值可以省略以下面代
    toastr.options = {
        "closeButton": false, //是否顯示關閉按鈕
        "debug": false, //是否使用debug模式
        "positionClass": "toast-top-full-width",//彈出窗的位置
        "showDuration": "300",//顯示的動畫時間
        "hideDuration": "1000",//消失的動畫時間
        "timeOut": "5000", //展現時間
        "extendedTimeOut": "1000",//加長展示時間
        "showEasing": "swing",//顯示時的動畫緩衝方式
        "hideEasing": "linear",//消失時的動畫緩衝方式
        "showMethod": "fadeIn",//顯示時的動畫方式
        "hideMethod": "fadeOut" //消失時的動畫方式
        };

彈出窗位置

1 toast-top-left  頂端左邊
2 toast-top-right    頂端右邊
3 toast-top-center  頂端中間
4 toast-top-full-width 頂端，寬度鋪滿整個螢幕
5 toast-botton-right  
6 toast-bottom-left
7 toast-bottom-center
8 toast-bottom-full-width

回撥函式

定義當toatrs顯示、隱藏、點選時的回撥

toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
toastr.options.onclick = function() { console.log('clicked'); }
toastr.options.onCloseClick = function() { console.log('close button clicked'); }