I wanted to override the default javascript confirm popups with a Bootstrap modal. But I cant make it work with ASP.net's property for most controls: "OnClientClick".

Here's the aspx content relevant:

<asp:TemplateField> <ItemTemplate> <asp:Button runat="server" Text="Delete" CssClass="btn btn-danger fullwidth" OnClientClick="return confirm('Are you sure?')" CommandName="Delete" /> </ItemTemplate> </asp:TemplateField>

And here's the javascript:

window.confirm = function (message, callback, caption) { confirmResponse = undefined caption = caption || 'Confirm' message = message.replace("

", "<br />"); var modalContainer, modalHeader, modalBody, modalFooter; /* Create modal if doesnt allready exists (to avoid dublicate modals) */ if ($("#confirmation-modal").length != 1) { modalContainer = $('<div>').attr({ 'class': 'modal fade', 'id': 'confirmation-modal' }); var modalDialog = $('<div>').attr({ 'class': 'modal-dialog' }); var modalContent = $('<div>').attr({ 'class': 'modal-content' }); modalHeader = $('<div>').attr({ 'class': 'modal-header' }); modalBody = $('<div>').attr({ 'class': 'modal-body' }); modalFooter = $('<div>').attr({ 'class': 'modal-footer' }); modalContainer.html($(modalDialog)); modalDialog.html($(modalContent)); modalContent.html($(modalHeader)); modalContent.append($(modalBody)); modalContent.append($(modalFooter)); } else { modalContainer = $("#confirmation-modal"); modalHeader = $("#confirmation-modal .modal-header"); modalBody = $("#confirmation-modal .modal-body"); modalFooter = $("#confirmation-modal .modal-footer"); } /* Set content of modal */ modalHeader.html('<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">' + caption + '</h4>'); modalBody.html('<p>' + message + '</p>'); var modalTrueBtn = $('<button type="button" class="btn btn-default">Yes</button>').click(function () { if (callback != undefined) callback(); console.log("confirm returned true"); return true; }); var modalFalseBtn = $('<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>').click(function () { console.log("confirm returned false"); return false; }); modalFooter.html(modalTrueBtn).append(modalFalseBtn); /* show modal */ modalContainer.modal(); };

The part of the code that creates the modal is fine. It pop's up just fine, but it doesnt return true/false.