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事件