如何在父对话之外但又超出其边界的情况下打开子对话？

Question

我正在构建一个 asp.net 项目，其中我需要打开一些弹出对话框来与用户交互。然而，我现在陷入了一个需要从另一个对话中打开对话的地方。任务很简单，也很正常。但问题是新对话是在第一个对话的边界内打开的，这对用户来说非常烦人，而且使应用程序变得丑陋。

请帮我一把，给我一种方法，让我可以让任何对话出现在他父母的界限之外..

当我在第一个对话中时，我尝试使用 RegisterStartupScript 将 div 放入最父窗口，但我发现 RegisterStartupScript 仅适用于活动窗口（可能是因为它需要重新加载才能生效，但它无效，因为用户正在与对话进行交互）。

Answer 1

首先，弹出一堆可移动对话框就像 20 年前一样，当涉及到 Web 领域时，您不想“想到”Windows 应用程序。更糟糕的是，SPA（单页应用程序）风靡一时。

还有更糟糕的吗？

随着智能手机、平板电脑等的兴起，在触摸设备上弹出可移动窗口往往是一个非常糟糕的主意（用户讨厌必须“尝试”移动窗口）。所谓的多文档界面在我们的行业中早已不复存在。

更糟糕的是？

只要尝试让 UI 对不同尺寸的屏幕进行“响应”，你就会给用户带来更多的伤害和痛苦。

但是，我想在某些情况下，您可以嵌套 2 个深度，但超过 2 个对话框深度对于最终用户来说将是一种痛苦的体验。

接下来：

如果你走这条路，那么你想要/需要/应该/好主意采用某种对话框系统，因为由于弹出窗口阻止程序，你经常无法使用 JavaScript window.open() 。

因此，有大量的对话框系统和引导对话框，而 jQuery.UI 对话框可能是最常见的。一旦开始嵌套对话框，jQuery.UI 将比引导对话框更好、更灵活。

所以，说这个例子：

因此，在上面，我们有一个 GridView，然后单击行编辑按钮来编辑该记录（我们的第一个对话框）。在该对话框内部，我们有一个删除按钮，因此这是确认删除的第二个嵌套对话框。

请注意，在上面，第二个对话框“仅限于”停留在第一个对话框内。

因此，我们的标记相当简单：

我们假设我们有 jQuery 和 jQuery.UI（jQuery.UI 有我们在这里使用的 .dialog wiget）。

所以，GridView 标记：

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            CssClass="table table-hover" Width="50%"
            DataKeyNames="ID">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                <asp:BoundField DataField="LastName" HeaderText="First Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
                <asp:BoundField DataField="Description" HeaderText="Descripiton" />
                <asp:TemplateField HeaderText="Edit" ItemStyle-HorizontalAlign="Center"
                    ItemStyle-Width="140px">
                    <ItemTemplate>
                        <asp:ImageButton ID="cmdEdit" runat="server"
                            ImageUrl="~/Content/edit2.png"
                            Width="48px"
                            Height="40px"
                            OnClick="cmdEdit_Click"
                            Style="margin-left: 15px" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

我们加载 GridView 的代码：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If

End Sub

Sub LoadGrid()
    GridView1.DataSource =
        MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GridView1.DataBind()
End Sub

现在单击我们的行按钮 - 弹出第一个对话框：

Protected Sub cmdEdit_Click(sender As Object, e As ImageClickEventArgs)

    Dim btn As ImageButton = sender
    Dim gRow As GridViewRow = btn.NamingContainer

    Dim intPK As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")
    Dim cmdSQL As New SqlCommand("SELECT * FROM tblhotelsA WHERE ID = @ID")
    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = intPK
    Dim rstData As DataTable = MyRstP(cmdSQL)
    fLoader(EditRecord, rstData.Rows(0))  ' code to load div
    ' pop the dialog client side
    Dim sJava As String = $"myedit('{btn.ClientID}')"
    ScriptManager.RegisterStartupScript(Page, Page.GetType, "MyPop", sJava, True)


End Sub

好的，现在我们的客户端 JavaScript：

第一个弹出窗口的 jQuery.UI 对话框代码如下所示：

<script>
    function myedit(Sbtn) {
        var btn = $('#' + Sbtn)
        myDialog = $("#EditRecord")
        myDialog.dialog({
            title: "Edit Hotel",
            modal: true,
            sizable: true,
            width: '830',
            closeText: "",
            dialogClass: "dialogWithDropShadow",
            position: { my: 'right top', at: 'left bottom', of: btn }
        })
    }

</script>

所以，上面所做的就是弹出我们的第一个“div”，它成为编辑对话框。

在“编辑 div”内部，我们有第二个嵌套 div，它成为我们的第二个弹出对话框。

因此，我们标记中的删除按钮（用于启动第二个嵌套弹出对话框）是这样的：

    <asp:LinkButton id="cmdDelete" runat="server" class="btn myshadow" style="margin-left:15px"
        OnClientClick="return mydelprompt(this)"
        OnClick="cmdDelete_Click1"
        >
        <span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
    </asp:LinkButton>

    <div id="deldivprompt" style="display: none">
        <h3> Delete Hotel = 
            <asp:Label ID="lblDelPrompt" 
                runat="server" Text=""
                f="HotelName"
                ></asp:Label>
        </h3>
        <h4><i>(This cannot be un-done</i></h4>
    </div>

        <script>

            var mydelok = false
            function mydelprompt(btn) {

                if (mydelok) {
                    mydelok = false
                    return true
                }
                myDialog2 = $("#deldivprompt")
                myDialog2.dialog({
                    autoOpen: "false",
                    title: "Delete this Hotel",
                    modal: true,
                    sizable: true,
                    width: '380',
                    closeText: "",
                    position: { my: 'left bottom', at: 'left top', of: btn },
                    dialogClass: "dialogWithDropShadow",
                    buttons: [
                        {
                            id: "MyDelete",
                            text: "Delete",
                            class: "myshadow",
                            click: function () {
                                myDialog2.dialog('close')
                                mydelok = true
                                btn.click()
                            }
                        },
                        {
                            id: "MyCancel",
                            text: "Cancel",
                            class: "myshadow",
                            click: function () {
                                myDialog2.dialog('close')
                            }
                        }
                    ]
                })

                myDialog2.parent().draggable({ containment: '#EditRecord' })
                myDialog2.dialog('open')
                
                return false
            }

        </script>

因此，我们弹出对话框，然后使用 jQuery.UI“可拖动”来限制第二个弹出对话框包含在我们的 EditRecord div（我们的第一个弹出对话框）内。