-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());
    }
}

[保存] ボタンをクリックすると、ポップアップ ダイアログが表示されます。しかし、問題は、[保存] ボタンがページのはるか下にあり、ダイアログがページの上部に表示されるため、ダイアログの [OK] ボタンをクリックするためにすべて上にスクロールする必要があることです。ダイアログの位置を変更する方法についての解決策を見つけましたが、どのように設定しても、ディスプレイはページの上部または保存ボタンのすぐ下に配置されます(ダイアログの実際の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 に答える