如何在javascript中編寫彈出窗口

Question

我需要創建一個如下所示的彈出窗口：
http://gyazo.com/48a138b2e40fda7e5e72acd1b653a518 在JavaScript中。

當管理員點擊Delete鏈接時，應該將一個參數傳遞給JavaScript on-click函數。

如何將不同的操作綁定到「確定」和「取消」按鈕？ 我的行爲是像下面這樣：

<a href="<c:url value="/Invalidate.do?val=INVALIDATE"/>">Logout</a> 

誰能幫我寫這篇文章的代碼（完整上單擊功能）？ 如果您還告訴我如何將此點擊附加到我的鏈接，那將是非常棒的。

在此先感謝

Answer 1

你可以使用window.confirm簡單的東西。

它可以工作，如果你不介意你所有的JavaScript阻止和對樣式的控制。

confirm和alert內置在所有瀏覽器中，但它們非常有限，通常對於除了一次性之外的任何事情都不是什麼好主意。

對於更多的控制，你將不得不帶來類似jquery ui dialog或bootbox from bootstrap這是隻是HTML，因此無限靈活。除非您已經在使用該庫，否則更麻煩的是要設置。而且，所有這些都不會阻止JavaScript的執行，而這又是一種更強大，更好的「實踐」，但對於人們來說更是如此 - 特別是初學者 - 要想得到他們的頭腦。

，所以你可以這樣做（假設jQuery的）：

$('button[name=delete]').click(function() { 
    if(window.confirm("You really sure?")) 
    doDelete(); 
}); 

或使用jQuery UI：

$('button[name=delete]').click(function() { 
    $('<div>').text("You really sure?") //Create a simple text element to be dialog'ed 
     .dialog({ 
      buttons: { 
       "Yes": function(){ 
        doDelete() 
        $(this).dialog('close'); 
       } 
       ,"No": function() { $(this).dialog('close'); } 
     }); 
});  

爲完整起見，這裏是去除冗餘代碼的一個圓滑的方式：

$('button[name=delete]').click(function() { 
    $('<div>').text("You really sure?") //Create a simple text element to be dialog'ed 
     .dialog({ 
      buttons: { 
       "Yes": closeAnd(doDelete) 
       ,"No": closeAnd() 
     }); 
    function closeAnd(fn) { //this function is automatically hoisted 
     return function() { //return a handler 
      $(this).dialog('close'); //value of 'this' is determined by who invokes it    
      fn && fn(); //invoke fn if it was passed 
     } 
    } 
});