ASP.NET с Bootstrap modal как подтверждение javascript

Question

Я хотел переопределить всплывающие окна javascript по умолчанию с помощью мода Bootstrap. Но я не могу заставить его работать с собственностью ASP.net для большинства элементов управления: «OnClientClick».

Вот содержание ASPX отношение:

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

А вот JavaScript:

window.confirm = function (message, callback, caption) { 
    confirmResponse = undefined 
    caption = caption || 'Confirm' 
    message = message.replace("\n", "<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">&times;</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(); 
}; 

Часть кода, который создает модальное прекрасно. Это всплывает нормально, но он не возвращает true/false.

Answer 1

Шаг 1: на кнопку вы либо OnClientClick = "openMyModal()" или поместить в код

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "none", "openMyModal()", True) 

Шаг 2: Либо вызвать JavaScript/функцию JQuery из вашего модальных кнопки OK, или поместите runat = "server" на вашу модальную кнопку ОК, чтобы сделать ее обратной передачей и поместить туда соответствующий код для выполнения вашего действия.

я первоначально не показывать модальный разметку Bootstrap наряду с функцией openMyModal для ясности, но такой функции будет выглядеть следующим образом:

function openMyModal() { 
    $('#myModal').modal({ 
     show: true 
    }) 
}