Question

我已经获得以下代码，提示用户使用jQuery模式作为地址验证的一部分：

    <div id="modal">
        <% if(SkipBilling.Value != "true")  {%>
        <div>
            <div>The billing address does not appear to be valid. Here is the closest match: </div>
            <asp:RadioButtonList ID="rdo_SuggestedBillAddr" runat="server" RepeatDirection="Vertical">
            </asp:RadioButtonList>
        </div>
        <br><br>
        <% } %>
        <% if(!chkSameAsBilling.Checked && SkipShipping.Value != "true") { %>
        <div>
            <div> The shipping address does not appear to be valid. Here is the closest match:</div>
            <asp:RadioButtonList ID="rdo_SuggestedShipAddr" runat="server" RepeatDirection="Vertical">
            </asp:RadioButtonList>
        </div>
        <br><br>
        <% } %>
        <asp:LinkButton runat="server" ID="lblSuggestionSelect"  OnClientClick="closeModal();" OnClick="LbSuggestedAddress_Click" CssClass="Button GrayButton" >Select</asp:LinkButton>
    </div>

var jQuery = jQuery.noConflict();

function closeModal() {
    jQuery("#modal").dialog("close");
    jQuery("#<%=ModalControl.ClientID%>").val("false");
}

function openModal() {
    jQuery("#modal").dialog("open");
}
function init() {

    jQuery("#modal").dialog({
        title: "Address Suggestion",
        resizable: false,
        draggable: true,
        closeOnEscape: false,
        modal: true,
        width: '500',
        open: function (type, data) { jQuery(this).parent().appendTo("form") },
        autoOpen: false
    });

    var dialogs = jQuery(".ui-dialog");
    if (dialogs.length == 2) {
        dialogs.first().children('#modal').remove();
        dialogs.first().remove();;
    }
}

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

prm.add_pageLoaded(function (sender, e) {
    init();
    var bool = jQuery("#<%= ModalControl.ClientID%>").val();
    var skipBill = jQuery("#<%= SkipBilling.ClientID%>").val();
    var skipShip = jQuery("#<%= SkipShipping.ClientID%>").val();
    if (bool == "true" && (skipBill != "true" || skipShip != "true")) {
        openModal();
    }
});

上面的div包含在UpdatePanel中;这一切都很好。但是，我还想介绍一个模态处理微调器。代码如下：

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(ConfigureAndShowCheckoutSpinner);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(CloseCheckoutSpinner);

function ConfigureAndShowCheckoutSpinner(s, e) {
    BuildModalDialog();
    AddSpinnerToModal();
    ShowModal();
}
function CloseCheckoutSpinner(s, e) {;
    jQuery('#checkoutSpinner').dialog("close");
}

function BuildModalDialog() {
    jQuery("#checkoutSpinner").dialog({
        title: "Processing",
        resizable: false,
        draggable: false,
        closeOnEscape: false,
        modal: true,
        autoOpen: false
    });
}

function AddSpinnerToModal() {
    var modalDiv = document.getElementById('checkoutSpinner');
    new Spinner().spin(modalDiv);
}

function ShowModal() {
    jQuery('#checkoutSpinner').dialog("open");
}

微调器的目标div位于包装地址验证模式的更新面板之外。

然而，当我把旋转器放在适当的位置;微调部分有效;但地址验证部分似乎没有刷新。逐步完成代码＆amp;使用监视窗口我可以验证字段是否已更新，并且无线电按钮列表中有项目;他们只是没有展示。拿出微调器可以让一切都重新开始工作。

我对此感到难过;微调器中的内容会破坏现有代码吗？

Answer 1

尝试销毁对话框。你可以用它来破坏模态。 .dialog('destroy')

当你使用时 .dialog("close")它被隐藏了。内容不会改变。

close保留对话框的配置，但不可见，因此您可以使用.dialog（＆＃39; open＆＃39;）重新打开它。

destroy将完全取消配置对话框。它将删除添加到DOM的所有UI元素以及任何相关的事件处理程序。

destroy不会删除保存对话框内容的元素（即您调用.dialog的元素）

Reference

添加微调器

1 个答案: