So here I'm using jquery dialog to display the page of my page, here's the aspx div code:
<div class="BodyDiv" id="DivProjectCode">
<asp:Label ID="LblMessage" runat="server" ForeColor="#ff6c34" Text=""></asp:Label>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table width="980px">
<tr>
<td align="left" width="120px" height="25px">
<asp:Label ID="Label8" runat="server" Text="Project Code"></asp:Label>
</td>
<td align="center" width="5px" class="style1">
<asp:Label ID="Label9" runat="server" Text=":"></asp:Label>
</td>
<td align="left" width="200px">
<asp:TextBox ID="TbSearchProjectCode" runat="server" Width="194px"></asp:TextBox>
</td>
<td align="center" width="25px">
<asp:ImageButton ID="BtnSearch" runat="server" ImageUrl="../Support/Image/MagnifierGlass.png"
Width="75%" Height="75%" OnClientClick="BtnSearch_Click" />
</td>
<td width="645px">
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div class="BodyDiv" style="overflow: auto; height: 200px">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<table width="1024px">
<tr>
<td align="center">
<table width="980px">
<tr>
<td>
<asp:Panel ID="PanelDGV" runat="server" ScrollBars="None" Height="250" Width="515">
<asp:GridView ID="DGV" runat="server" AutoGenerateColumns="False" GridLines="None"
AllowPaging="true" PageSize="8" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:BoundField DataField="ProjectCode" HeaderText="Project Code" />
<asp:BoundField DataField="ProjectName" HeaderText="Project Name" />
<asp:ButtonField ButtonType="Image" ImageUrl="../Support/Image/Edit.png" ItemStyle-HorizontalAlign="Center"
CommandName="CmdSearch" HeaderText="Edit">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:ButtonField>
</Columns>
<PagerStyle CssClass="pgr"></PagerStyle>
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
</asp:GridView>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
and the jquery function:
<script language="javascript" type="text/javascript">
$(function() {
$("#DivProjectCode").dialog({
autoOpen: false,
modal: true,
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
$("#Button1").click(function() {
$("#DivProjectCode").dialog("open");
});
});
</script>
the problem is, the whole screen is dimmed including the dialog which isn't supposed to be, when I try to fix it by changing the 'form' to 'form1', the modal works, but the function on the page is not working, do I miss something in the code?