更改彈出對話框的位置

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