在jQuery對話框中執行c＃代碼單擊確定按鈕

Question

我有一個有搜索按鈕的asp.net網頁。當單擊按鈕時，會出現一個jquery對話框，用戶必須確認他們想要繼續或取消。如果他們點擊確認按鈕，搜索按鈕後面的c＃代碼必須繼續執行，如果他們點擊取消，對話框必須關閉，沒有其他事情發生。我用來顯示模式彈出的jQuery如下

$(document).ready(function() { 
     $("#<%=butSearch.ClientID%>").click(function (e) { // Button which will activate our modal 
      $('#modal').reveal({ // The item which will be opened with reveal 
       animation: 'fade',     // fade, fadeAndPop, none 
       animationspeed: 600,      // how fast animtions are 
       closeonbackgroundclick: true,    // if you click background will modal close? 
       dismissmodalclass: 'close' // the class of a button or element that will close an open modal 
      }); 
      return false; 
     }); 
    }); 


<div id="modal"> 
    <div id="heading"> 
     Search Notification 
    </div> 

    <div id="content"> 
     <p>Please be aware that any search via the xxxx, will incur a cost. Do you wish to proceed?</p> 

     <a href="#" class="button green close"><img src="../../Imgs/dialog_tick.png">Proceed</a> 
     <a href="#" class="button red close"><img src="../../Imgs/dialog_cross.png">Cancel</a> 
    </div> 
</div> 

Answer 1

假設我期待在right plugin，也不會出現任何選項，您可以通過這個插件到不同配置的關閉按鈕響應。

但是，沒有理由不將事件附加到您有興趣執行其他操作的按鈕上。在你的情況即時通訊思想是這樣的繼續按鈕，並且你想使一個AJAX調用服務器：

$('#modal .button.green.close').click(function(){ 
    $.ajax(...) 
}); 

在這個例子中，$.ajax可以替代任何的jQuery ajax方法。

Answer 2

好吧，你可以先試試這個，確保模態彈出被追加在 表格裏，然後在用戶點擊繼續時簡單地使用jQuery提交表單。

$(document).ready(function() { 
    $("#<%=butSearch.ClientID%>").click(function (e) { // Button which will activate our modal 
     $('#modal').reveal({ // The item which will be opened with reveal 
      animation: 'fade',     // fade, fadeAndPop, none 
      animationspeed: 600,      // how fast animtions are 
      closeonbackgroundclick: true,    // if you click background will modal close? 
      dismissmodalclass: 'close' // the class of a button or element that will close an open modal 
     }); 
     jQuery("#modal").parent().appendTo(jQuery("form:first")); // This will append the dialog to the form ensuring values are sent during postback. 
     return false; 
    }); 
}); 



<div id="modal"> 
<div id="heading"> 
    Search Notification 
</div> 

<div id="content"> 
    <p>Please be aware that any search via the xxxx, will incur a cost. Do you wish to proceed?</p> 

    <a href="#" id="anchorProceed" onclick="javascript:proceed()" class="button green close"><img src="../../Imgs/dialog_tick.png">Proceed</a> 
    <a href="#" id="anchorCancel" class="button red close"><img src="../../Imgs/dialog_cross.png">Cancel</a> 
</div> 

function proceed(){ 
$("#yourFormID").submit(); 
}