同一表单上的多个 jquery-ui 弹出框

Question

我的 asp 页面中有以下内容：

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">

<!--//**********************************
    // Test modal popup
    //**********************************  -->
<script type="text/javascript">
    //Total out of range dialog
    $(function () {
        $("#dialog").dialog({
            modal: true,
        //    autoOpen: false,
        width: 570,
        buttons: {
            "Ok": function () {
                $(this).dialog("close");
            }
        }

        });
    });
</script>

<!--//**********************************
    // Test modal popup 2
    //**********************************  -->
<script type="text/javascript">
    //Total out of range dialog
    $(function () {
        $("#dialog2").dialog({
            modal: true,
            //    autoOpen: false,
            width: 570,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }

        });
    });
</script>

然后再往下，在页面的最底部我有这个：

<div id="dialog" title="ATTENTION">
    <table style="width:565px; border-spacing:0px; border-collapse:collapse;">
        <tr>
            <td style="width:65px; ">
             <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Achtung.svg/2000px-Achtung.svg.png" style="height: 50px; width: 50px" />

            </td>
            <td style="vertical-align:top">
                <p><center><b>This is NOT the production version of the application.</b></center>
                <p>This version is used for TRAINING or TESTING PURPOSES ONLY. If you intended to be in the production version, please close this version and access the production environment. If you have additional questions, please refer to the SOP or consult your manager.</p>
            </td>
        </tr>
    </table>
</div>

<div id="dialog2" title="ATTENTION">
    <table style="width:565px; border-spacing:0px; border-collapse:collapse;">
        <tr>
            <td style="width:65px; ">
             <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Achtung.svg/2000px-Achtung.svg.png" style="height: 50px; width: 50px" />
            </td>
            <td style="width: 240px">
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" CssClass="textbox" Height="20px" OnSelectedIndexChanged="ddlRole_SelectedIndexChanged" Width="230px"></asp:DropDownList>
            </td>
        </tr>
    </table>
</div>
</asp:Content>

问题是，它们都在页面加载时弹出，但第二个 (Dialog2) 应该只在按下某个按钮时弹出。

如何在页面加载时禁止打开第二个弹出窗口？

Answer 1

你没有提到它，但是你取消注释选项 autoOpen 是有原因的吗在你的第二个对话框中？将其设置为 false 应该可以解决问题。

来自http://api.jqueryui.com/dialog/#option-autoOpen

autoOpen

Type: Boolean

Default: true

If set to true, the dialog will automatically open upon initialization. If false, the dialog will stay hidden until the open() method is called.

Answer 2

在脚本中为第二个对话框设置 autoOpen: false, 并在第一个对话框中定义打开函数，

<script type="text/javascript">
$(function () {

    $("#dialog").dialog({
        modal: true,
        //autoOpen: false,
        width: 570,
        buttons: {
            "Ok": function () {
                $(this).dialog("close");
            },
                "open": function () {
                $('#dialog2').dialog("open");
            }
        }

    });
});
</script>

<script type="text/javascript">
$(function () {
    $("#dialog2").dialog({
        modal: true,
        autoOpen: false,
        width: 570,
        buttons: {
            "Ok": function () {
                $(this).dialog("close");
            }
        }

    });
});
</script>

See in Action

同一表单上的多个 jquery-ui 弹出框

multiple jquery-ui popup boxes on the same form

asp.net

jquery

jquery-ui

modal-dialog

popup