-1

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

当用户单击保存按钮时，我试图显示一个显示“已成功保存”的弹出对话框。

在 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 很陌生，所以我将不胜感激。理想情况下，我想将它显示在页面的中心，或者至少，我希望它就在保存按钮旁边。

4

1 回答 1

0

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

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;
}
于 2013-04-01T17:55:51.530 回答