Question

我想用Bootstrap模式覆盖默认的javascript确认弹出窗口。但我无法使其适用于大多数控件的ASP.net属性：＆＃34; OnClientClick＆＃34;。

以下是相关的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函数，或在模态确定按钮上放置runat =“server”以使其回发并在其中放置适当的代码以执行您的操作。

为了清楚起见，我最初没有显示Bootstrap模态标记以及openMyModal函数，但是这样的函数看起来像这样：

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

ASP.NET与Bootstrap模式作为JavaScript确认

1 个答案: