how do i replicate the stackoverflow close button click to replace confirmation pages in asp.net-mvc

Question

i have taken over an asp.net mvc and i there are a lot of actions that require user confirmation. The current implementation is to have a separate View for each of these confirmation pages.

i thought it would be slicker to use jquery to have a little popup when you click "delete user" for example that shows the user confirmation there ("Are you sure you want to delete user "xx"?)

I want this to work similar to when you click on "CLOSE" on a stackoverflow question. You get the inline popup to confrim and then submit

any suggestions where to start? Should this still be another view or should this code be embedded in the regular view that has the actions? i have been playing around with the jquery samples but i feel like i am still very much guessing on the best practice here.

So I went to view the page source of stackoverflow to look at what happens when you click on the close button but all i see is:

<a id="close-question-1238657" title="closes/opens question for answering; when closed, no more answers can be added">close</a>

i dont see what is calling the popup

Answer 1

Have a look at jQuery UI Dialog.

Answer 2

Apart from jQuery UI Dialog, you can also try SimpleModal by Eric Martin.

EDIT

The code given in the confirm.js contains two method definitions. One is a generic method called confirm, which will create your modal popup with the message you want to be displayed. You have to use this method whenever you want to create the modal popup.

confirm("Are you sure you want to delete this item?", function() {
    //Here you will write the code that will handle the click of the OK button.
});

Here, the second argument is a function (this works almost like a delegate in C#). What will happen is that the confirm function will show a dialog containing your message, and when the user clicks any button, the anonymous function passed as the second argument will be invoked. You can also write a "normal" function and pass it as a second argument to confirm -

function callbackHandler() {
    //Here you will write the code that will handle the click of the OK button.
}

confirm("Are you sure you want to delete this item?", callbackHandler);

Your function will be invoked by this piece of code -

// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
    // call the callback
    if ($.isFunction(callback)) { callback.apply(); }
    // close the dialog
    $.modal.close();
});