I finally got around to using the SimpleModal delete confirmation that I wrote about quite a while back. One of the first things I noticed was that I could cut down a lot of the html markup by not including the confirmation in each row of the table and instead just setup a single confirmation and call it each time one of the delete icons was clicked.

Demo | Download

End Product:

HTML:

<!--Delete Customer-->
<div id="confirm" style="display:none">                    
    <div class="confirmheader"><span>Confirm</span></div>
        <p class="confirmmessage"></p>
    <div class="confirmbuttons">            
        <button id="ButtonYes" class="yui-button">Yes</button>&nbsp;
        <button id="ButtonNo" class="yui-button modalClose">No</button>
    </div>

    <!-- Hidden command buttons that actually issue the delete -->
    <asp:Button ID="ButtonDeleteCustomer" runat="server" 
        CausesValidation="false" style="display:none" />
</div>  

And -

<!-- Cell with delete icon -->
<td> 
    <img runat="server" src="~/_assets/img/delete.png" class="deleteCustomer"
        title='<%# "Delete " + Eval("contactname")  %>' />                                       
</td>

And Finally -

<!-- Hidden Field to Hold Primary Key-->
<asp:HiddenField ID="HiddenFieldRowId" runat="server" />

jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $(".deleteCustomer").click(function(ev) {
            ev.preventDefault();
            var msg = $(this).attr("title");
            $("#HiddenFieldRowId").val($(this).parent("tr").find(".id").val());
            confirm(msg + "?");
        });
    });

    function confirm(message) {
        $("#confirm").modal({
            close: true,
            overlayId: 'confirmModalOverlay',
            containerId: 'confirmModalContainer',
            onShow: function modalShow(dialog) {
                dialog.overlay.fadeIn('slow', function() {
                    dialog.container.fadeIn('fast', function() {
                        dialog.data.hide().slideDown('slow');
                    });
                });

                dialog.data.find(".confirmmessage").append(message);

                // Yes button clicked
                dialog.data.find("#ButtonYes").click(function(ev) {
                    ev.preventDefault();
                    $.modal.close();
                    $("#ButtonDeleteCustomer").click();
                });
            }
        })
    }
                                
</script>

The key to making everything work is having a hidden field whose value is set to the primary key/id of the row when the delete icon is clicked. When yes is clicked the confirmation popup closes and the click event of a hidden button is fired which causes the postback and deletes the row. The delete event in the code behind would then look for the the hidden field to know which row to delete. I am pretty happy with this confirmation, but am planning to do the same thing with jqModal to see if I like it better.

Update 28OCT08: John pointed out in the comments that the no button quit working on the third click without a postback in IE. I tracked down that I did not need to set the click event of the no button in my own jquery and instead just add the default modalClose class to the button and the plugin will take care of the binding and unbinding. The code above has been updated and should now work correctly in IE, Firefox and Chrome. The download has also been updated.