zlb

DJ JQuery Dialog弹出窗居中及在弹出窗中使用服务器控件

Dialog 控件弹出后总是显示在左上角,不能居中显示,解决方法如下

jquery 1.4  jquery UI 1.8.6 vs2010

<script language="javascript"  type="text/javascript">
   
    function setDialogInCenter() {
        if (typeof ($("div.ui-dialog")[0]) == "undefined") {
            setTimeout(setDialogInCenter, 1);
        }
        else {
            //reference  http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen
            $("div.ui-dialog").css("position", "absolute");
            $("div.ui-dialog").css("top", (($(window).height() - $("div.ui-dialog").outerHeight()) / 2) + $(window).scrollTop() + "px");
            $("div.ui-dialog").css("left", (($(window).width() - $("div.ui-dialog").outerWidth()) / 2) + $(window).scrollLeft() + "px");
        }
    }
     </script>

ASP.net页面代码

<form id="form1" runat="server" >
    
    <DotNetAge:DatePicker ID="DatePicker1" runat="server"  >
    </DotNetAge:DatePicker>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <DotNetAge:Dialog ID="Dialog1" runat="server" Title="[DialogTitle]" o>
     <BodyTemplate>
     
     <asp:Button runat="server" Text="aa" ID="btn" onclick="Unnamed1_Click" />
      
</BodyTemplate>
<Trigger Selector=""></Trigger>
    </DotNetAge:Dialog>
    </form>

.cs代码

protected void Button1_Click(object sender, EventArgs e)
      {
          this.DatePicker1.Value =DateTime.Parse( "2011-02-13");
 
          Page.ClientScript.RegisterStartupScript(this.GetType(), "setDialogInCenter", "setDialogInCenter();", true);
          //Page.ClientScript.RegisterStartupScript(this.GetType(), "setDialogInForm", "setDialogInForm();", true);
          this.Dialog1.Position=DNA.UI.JQuery.DialogPositions.Right;//.JQueryEffects.
          this.Dialog1.ShowModal = true;
         // this.Dialog1.Parent.a
      
          this.Dialog1.AutoOpen = true;
 
      }
 

 

也可以在前台 <body   onload="setDialogInCenter();"> 添加js事件

 

Dialog 控件弹出后,在Dialog 控件中使用服务器端控件,没有反应

<script language="javascript"  type="text/javascript">
    function setDialogInForm() {
        if (typeof ($("div.ui-dialog")[0]) == "undefined") {
            setTimeout(setDialogInForm, 10);
        }
        else {
            $(".ui-dialog").prependTo("form");
        }
    } 
         </script>

 

asp.net页面代码

<body   onload="setDialogInForm();">
    <form id="form1" runat="server" >
    
    <DotNetAge:DatePicker ID="DatePicker1" runat="server"  >
    </DotNetAge:DatePicker>
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <DotNetAge:Dialog ID="Dialog1" runat="server" Title="[DialogTitle]" o>
     <BodyTemplate>
     
     <asp:Button runat="server" Text="aa" ID="btn" onclick="Unnamed1_Click" />
      
</BodyTemplate>
<Trigger Selector=""></Trigger>
    </DotNetAge:Dialog>
    </form>
</body>

 

.cs代码

protected void Button1_Click(object sender, EventArgs e)
      {
          Page.ClientScript.RegisterStartupScript(this.GetType(), "setDialogInForm", "setDialogInForm();", true);
          this.Dialog1.Position=DNA.UI.JQuery.DialogPositions.Right; 
          this.Dialog1.ShowModal = true;
          this.Dialog1.AutoOpen = true;
 
      }
 

 

也可以在前台 <body   onload="setDialogInForm();"> 添加js事件

posted on 2012-03-13 14:00  zlb  阅读(1451)  评论(0编辑  收藏  举报

导航