execute c# code after jquery dialog OK button is clicked

Question

I have an asp.net web page that has a search button.When the button is clicked, a jquery dialog box appears and the user must either confirm that they want to continue or cancel.If they click the Confirm button, the c# code behind the Search button must continue to be executed and if they click cancel, the dialog must be closed and nothing else happens.The jQuery i am using to display the modal pop up is below

    $(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

Assuming I'm looking at the right plugin, there does not appear to be any option you can pass to this plugin to respond differently to the close button configured.

There is, however, no reason not to attach an event to the button you're interested in performing some other action. In your case im thinking that's the proceed button, and you want to make an ajax call to the server:

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

In that example, $.ajax can be substituted for any of the jquery ajax methods.

Answer 2

Ok you can try this first make sure the modal pop up is appended inside form and then simply cause form submit with jQuery in case user clicks on Proceed.

$(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();
}