Question

我在asp.net更新面板中有一个模态框，显示行何时需要删除。我使用下面的jQuery代码集中显示模式框：

function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;

// Center modal vertically in window
$dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
    $('.modal:visible').each(centerModal);
});

此代码有效，但当我点击确定按钮并发出ajax请求时，模态会失去它的位置。

这是我的模态html代码：

<div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <asp:UpdatePanel ID="upDelete" runat="server">
        <ContentTemplate>
            <asp:Panel ID="pnlCompanyDelete" runat="server" CssClass="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" class="close" data-dismiss="modal" type="button" onclick="HideDeleteBox();">
                            ×</button>
                        <i class="icon-trash-o"></i>
                        <h4 class="modal-title withIcon" id="myModalLabel">
                            <%=Resources.Titles.DeleteCompany%></h4>
                    </div>
                    <div class="modal-body">
                        <div class="bootbox-body">
                            <div class="form">
                                <div class="form-group help-block has-error">
                                    <span>
                                        <%=Resources.Messages.AreYouSureDelete%></span>
                                </div>
                                <div class="form-group help-block has-error">
                                    <asp:Label ID="lblDeleteMessage" runat="server" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnDelete" runat="server" Text="<%$ Resources:Buttons,Confirm %>" CssClass="btn btn-success btn-sm" OnClick="btnDelete_Click" />
                        <input type="button" value="<%=Resources.Buttons.Cancel %>" class="btn btn-sm cancel-delete" onclick="HideDeleteBox();" />
                    </div>
                </div>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

我该如何解决这个问题？

Answer 1

我可以通过在ajax的endrequest函数中添加以下代码来解决这个问题：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestPostBackForUpdateControls);

function EndRequestPostBackForUpdateControls()
{
    $('.modal').on('show.bs.modal', centerModal);
    $('.modal:visible').each(centerModal);
}

在“更新”面板中发生异步回发时，Bootstrap模式将丢失位置

1 个答案: