Question

英语不是我的母语;请原谅输入错误。

我正在尝试显示一个弹出式对话框，当用户点击“保存”按钮时，该对话框显示“已成功保存”。

在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>

在后面的代码中，我有

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

单击“保存”按钮时，我会看到弹出对话框。但是，问题是“保存”按钮位于页面的下方，对话框显示在页面顶部，因此我必须向上滚动以单击对话框上的“确定”按钮。我找到了关于如何更改对话框位置的解决方案，但无论我如何设置它，显示都位于页面顶部或保存按钮下方（这是对话框的实际html代码），“savedDialog”，是）。我在这里想要改变对话的位置是什么？我对jquery很新，所以我很感激任何帮助。理想情况下，我想将它显示在页面的中心，或者至少，我希望它就在保存按钮的旁边。

Answer 1

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

<强> 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>

<强> CS：

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

<强> CSS：

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

更改弹出对话框的位置

1 个答案: