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

2024-04-27 21:53•html•阅读 717

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  runat="server" >

    <DotNetAge:DatePicker  runat="server"  >

    </DotNetAge:DatePicker>

    <asp:Button  runat="server" Text="Button" onclick="Button1_Click" />

    <asp:Label  runat="server" Text="Label"></asp:Label>

    <asp:ScriptManager  runat="server">

    </asp:ScriptManager>

    <DotNetAge:Dialog  runat="server" Title="[DialogTitle]" o>

     <BodyTemplate>

     <asp:Button runat="server" Text="aa"  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  runat="server" >

    <DotNetAge:DatePicker  runat="server"  >

    </DotNetAge:DatePicker>

    <asp:Button  runat="server" Text="Button" onclick="Button1_Click" />

    <asp:Label  runat="server" Text="Label"></asp:Label>

    <asp:ScriptManager  runat="server">

    </asp:ScriptManager>

    <DotNetAge:Dialog  runat="server" Title="[DialogTitle]" o>

     <BodyTemplate>

     <asp:Button runat="server" Text="aa"  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事件