Jquery 更改弹出对话框的位置

英语不是我的母语；请原谅打字错误

当用户点击save按钮时，我试图显示一个弹出对话框，上面写着“Saved successfully”

在Html中，我有

<script src="Scripts/jquery-ui-1.9.0.custom.js" type="text/javascript"></script>
<link rel="Stylesheet" type="text/css" href="Styles/jquery-ui-1.8.21.custom.css" />
<link rel="Stylesheet" href="Styles/jquery-ui.css" />
<script type="text/javascript">
    $(document).ready(function () {
        var isSaved = '<%= this.showSavedDialog %>';
        if (isSaved)
        {
            $("#savedDialog").dialog({
                buttons: {
                    OK: function () {
                        $(this).dialog("close");
                    }
                },
                position: {
                    my: 'left bottom',
                    at: 'right top',
                    of: ("#btnSave")
                }
            });
        }
    });

</script>

<asp:LinkButton ID="btnSave" runat="server">Save</asp:LinkButton>

<div id="savedDialog">
    Saved successfully
</div>

单击“保存”按钮时，我确实会看到弹出对话框。但是，问题是保存按钮在页面的下方，对话框显示在页面的顶部，因此我必须向上滚动，以单击对话框上的“确定”按钮。我已经找到了关于如何更改对话框位置的解决方案，但无论我如何设置，显示都位于页面顶部或“保存”按钮的正下方（这就是对话框的实际html代码“savedDialog”所在的位置）。 我在这里缺少什么来更改对话框的位置？我对jquery非常陌生，因此我非常感谢您的帮助。

---

理想情况下，我希望它显示在页面的中心，或者至少，我希望它就在保存按钮的旁边

我自己的问题得到了答案。这就是我所做的

HTML:

<script type="text/javascript">
    $(document).ready(function () {
        var isSaved = '<%= this.showSavedDialog %>';
        if (isSaved)
        {
            $("#savedDialog").dialog({
                buttons: {
                    OK: function () {
                        $(this).dialog("close");
                    }
                },
                position: {
                    my: "bottom",
                    at: "top",

                    //used div instead of a button so the dialog can be centered     
                    of: ("#div-save") 

                    //I needed this the dialog can be displayed at the bottom of the page
                    collison: "none"                     
                    }
            });
        }
    });

</script>

<div id="div-save">
    <asp:LinkButton ID="btnSave" runat="server">Save</asp:LinkButton>
</div>

<div id="savedDialog">
    Saved successfully
</div>

protected bool showSavedDialog
{
    get
    {
        if (Session["showSavedDialog"] == null)
        {
            Response.Redirect("SessionExpired.aspx");
        }
        return bool.Parse(Session["showSavedDialog"].ToString().ToLower());
    }
}

#div-save
{
    float:left;
    width: 935px;
}

CSS:

<script type="text/javascript">
    $(document).ready(function () {
        var isSaved = '<%= this.showSavedDialog %>';
        if (isSaved)
        {
            $("#savedDialog").dialog({
                buttons: {
                    OK: function () {
                        $(this).dialog("close");
                    }
                },
                position: {
                    my: "bottom",
                    at: "top",

                    //used div instead of a button so the dialog can be centered     
                    of: ("#div-save") 

                    //I needed this the dialog can be displayed at the bottom of the page
                    collison: "none"                     
                    }
            });
        }
    });

</script>

<div id="div-save">
    <asp:LinkButton ID="btnSave" runat="server">Save</asp:LinkButton>
</div>

<div id="savedDialog">
    Saved successfully
</div>

protected bool showSavedDialog
{
    get
    {
        if (Session["showSavedDialog"] == null)
        {
            Response.Redirect("SessionExpired.aspx");
        }
        return bool.Parse(Session["showSavedDialog"].ToString().ToLower());
    }
}

#div-save
{
    float:left;
    width: 935px;
}

---

这个问题的答案：应该能回答你的问题。这很有帮助。谢谢：）