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

標籤：alert   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或者falselocation.reload()

confirm屬於window對象,可以阻塞當前頁面,直到使用者點擊確認或者取消按鈕時,當前頁面才會重新整理.

 

JavaScript的幾種彈窗

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

警告訊息框 （alert）

彈出提示訊息.

確認訊息框 （confirm）

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

提示訊息框 （prompt）

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

 

jQuery  jquery-confirm

 

可以使用html元素定製彈窗展示,可以使用回呼函數.

把所有的指令碼操作放入回呼函數內,可以防止例子中的頁面被重新整理.

 

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

本文出自 “quxf2012” 部落格，請務必保留此出處http://quxf2012.blog.51cto.com/12149748/1872114

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