Ok i'm trying to display some certain data in a jquery modal form which i'm quite new to but i seem to run into a little bit of trouble. I do have a hidden div(the pop up) that contains 2 textboxs...which is supposed to display the data while its being popped-up.
But the problem is it doesn't while the modal form is up...but when i make the div visible at run time,
Check are you able to click on any link other than the popup area. If you are not able to do so. Then you have to change the style sheet to make ot grayed out.
Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
jay200032
Member
18 Points
23 Posts
Help with modal form popup
Feb 13, 2012 03:42 PM|LINK
Hello people,
Ok i'm trying to display some certain data in a jquery modal form which i'm quite new to but i seem to run into a little bit of trouble. I do have a hidden div(the pop up) that contains 2 textboxs...which is supposed to display the data while its being popped-up. But the problem is it doesn't while the modal form is up...but when i make the div visible at run time,
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <link href="Styles/Site.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script src="Scripts/jquery.jmpopups-0.5.1.js" type="text/javascript"></script> <title></title> <script type="text/javascript"> $.setupJMPopups({ screenLockerBackground: "#000000", screenLockerOpacity: "0.5" }); function ajaxPopup(id) {var details = $('#Text1').val(id); $.openPopupLayer({ name: "myPopup", width: 300, target: "showReport" }); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="MainScriptManager" runat="server"></asp:ScriptManager> <div id="header"> <div id="headerText"> <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Names="Segoe UI" Font-Size="16pt" Text="" ClientIDMode="Static"></asp:Label> <br /> </div> </div> <div id="body"> <div id="bodySearchParam"> </div> <div id="bodyDisplaySearch"> <asp:GridView ID="ReportGridView" runat="server" AllowPaging="True" BorderStyle="Groove" BorderWidth="1px" CellPadding="4" EmptyDataText="No records defined!!" ForeColor="#333333" onpageindexchanging="ReportGridView_PageIndexChanging" onrowcommand="ReportGridView_RowCommand" Width="940px" AutoGenerateColumns="False" PageSize="11" ShowHeaderWhenEmpty="True" onrowdatabound="ReportGridView_RowDataBound"> <AlternatingRowStyle BackColor="White" ForeColor="#284775" /> <Columns> <asp:TemplateField HeaderText="SELECT"> <ItemTemplate> <a id="ViewReportLinkButton" onclick="ajaxPopup(<%# Eval("transaction_id") %>)" href="javascript:;" >View Report</a> </ItemTemplate> <ItemStyle HorizontalAlign="Left" Width="100px" /> </asp:TemplateField> <asp:BoundField HeaderText="SESSION ID" DataField="sessionid" SortExpression="sessionid" > <ItemStyle Width="150px" /> </asp:BoundField> <asp:BoundField HeaderText="METHOD NAME" DataField="MethodName" SortExpression="MethodName" > <ItemStyle Width="120px" /> </asp:BoundField> <asp:BoundField HeaderText="CHAN. CODE" DataField="ChannelCode" SortExpression="ChannelCode" > <ItemStyle Width="100px" /> </asp:BoundField> <asp:BoundField HeaderText="RESP.CODE" DataField="response_Code" SortExpression="response_Code" > <ItemStyle Width="100px" /> </asp:BoundField> </Columns> <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Font-Names="Segoe UI" HorizontalAlign="Left" Height="30px" /> <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#F7F6F3" ForeColor="#333333" HorizontalAlign="Left" Height="30px" /> <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#E9E7E2" /> <SortedAscendingHeaderStyle BackColor="#506C8C" /> <SortedDescendingCellStyle BackColor="#FFFDF8" /> <SortedDescendingHeaderStyle BackColor="#6F8DAE" /> </asp:GridView> </div> <div id="modalForm"> <asp:Panel ID="ReportPanel" runat="server" CssClass="modalPopup" Style="display: none; width: 600px; height: 400px; background-color: White; border-width: 1px; border-color: #999999; border-style: solid; padding: 10px; font-family: 'Lucida Console'; font-size: 12px;"> <table style="text-align: center;"> <tr> <asp:Label ID="Label9" runat="server" Text="REPORT IN DETAIL" Font-Bold="True" Font-Size="14px" Font-Underline="True" Width="200"></asp:Label> </tr> </table> <asp:UpdatePanel ID="ReportUpdatePanel" runat="server"> <ContentTemplate><br /> <asp:Label ID="ViewReportLabel" runat="server" Text="ID Number:"></asp:Label><br /> <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </div> <div id="showReport" style="display> <asp:TextBox ID="Text1" runat="server"></asp:TextBox> </div> <div id="footer"></div> </div> </form> </body> </html>asteranup
All-Star
30184 Points
4906 Posts
Re: Help with modal form popup
Feb 13, 2012 04:13 PM|LINK
Hi,
You can try jQuery dialog-
http://delicious.com/anupdg/dialog+modal+forum
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
Allen Li - M...
Star
10411 Points
1196 Posts
Re: Help with modal form popup
Feb 15, 2012 03:38 AM|LINK
Hi, to open a popup with two textboxes, you can refer to the following method:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#div1').dialog({ autoOpen: false, title: 'Popup window with two textboxes' }); $('#Button1').click(function () { $('#div1').dialog('open'); }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="div1" style="display:none"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </div> <input id="Button1" type="button" value="button" /> </form> </body> </html>If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework
heinserdiaz
Member
7 Points
21 Posts
Re: Help with modal form popup
May 02, 2012 04:56 PM|LINK
Thanks, this works fine.
But how can I add some style to the dialog in order to look like a window? Right now it just displays 2 textboxes.
And also, how can I make the rest of the screen greyed out while the window is open?
TIA
asteranup
All-Star
30184 Points
4906 Posts
Re: Help with modal form popup
May 03, 2012 04:01 AM|LINK
Hi,
You can play with the css file of the dialog to match your desired style. And to make the grayed you need to set model: true in the dialog-
$("#dialog").dialog({ title: 'Enter Clock No', modal: true, show: 'slide', hide: 'slide' });Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
heinserdiaz
Member
7 Points
21 Posts
Re: Help with modal form popup
May 03, 2012 04:17 PM|LINK
Yeah, that's what I tried before but it doesn't grey out the rest of the screen, even though the "slide" show and hide is working OK.
asteranup
All-Star
30184 Points
4906 Posts
Re: Help with modal form popup
May 04, 2012 05:08 AM|LINK
Hi,
Check are you able to click on any link other than the popup area. If you are not able to do so. Then you have to change the style sheet to make ot grayed out.
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog