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/