JavaScript 和 jQuery $.alert alert $.confirm confirm 的對比

JavaScript 和 jQuery  彈窗對比

javascript 的三種彈框對象隸屬於window對象,而且都會阻塞當前事件和腳本,直到用戶操做完成纔會繼續執行後續事件和腳本.不能使用html元素.

jQuery(jquery-confirm插件) jQuery的彈出窗口是經過html元素和一些js事件模擬出來的,隸屬於document對象,並且不可以阻塞其餘的事件和腳本執行.

 

例:

jQuery 腳本

腳本1:

var $confirm= $.confirm('是否繼續?');  //執行後返回當前彈窗的jQuery對象
location.reload()

 

這個腳本,並不會等待用戶點擊肯定後,才繼續執行下面的重載操做.

$.confirm只是生成了一個新的html元素,用css控制展示出了彈窗效果.

而後在肯定和取消按鈕上綁定了js事件,用戶點擊時觸發回調函數.

此時$.confirm的任務已經完成了,並不會等到用戶點擊了確認或者取消按鈕後才執行後續操做.

這種狀況,後面的語句固然會繼續執行,因此頁面會直接刷新,不會去等待用戶操做.

 

腳本2:

把須要肯定後才能執行的操做,放到到彈窗的回調函數中,來防止用戶沒有操做時頁面就被刷新

$.confirm({
    title: '我是標題',
    content: '是否繼續?',
    buttons: {
        confirm: function () {
            location.reload()
        },
        cancel: function () {
            $.alert('Canceled!');
        }
    }
});

 

JavaScript腳本

var ret=confirm('是否繼續?');   //返回true或者false
location.reload()

confirm屬於window對象,能夠阻塞當前頁面,直到用戶點擊確認或者取消按鈕時,當前頁面纔會刷新.

 

JavaScript的幾種彈窗

不能使用html元素定製頁面展現.

警告消息框 （alert）

彈出提示消息.

確認消息框 （confirm）

彈出一個消息,點擊確認返回true點擊取消返回false

提示消息框 （prompt）

彈出輸入框,點擊確認返回輸入框內內容,點擊取消返回null值

 

jQuery jquery-confirm

 

能夠使用html元素定製彈窗展現,能夠使用回調函數.

把全部的腳本操做放入回調函數內,能夠防止例子中的頁面被刷新.

 

https://craftpip.github.io/jquery-confirm/