AJAX :: Show Modal Popup On Button Click
Apr 17, 2014I want to show show Ajax moadal popup on client when I click on Button...
View 1 RepliesI want to show show Ajax moadal popup on client when I click on Button...
View 1 Repliesi use modal popup extender to show my details in another separate window it is a panel contains some controls the problem is ::
when i click on my button which contains::
the Show() method the parent page just frozen and no popup appears at all on the other side i have a grid view when i click on the last button on it the popup appears where the other buttons on the grid view make the same behavior of my first button , i donot know what is the problem my panel visibility = true and no setting in my behind code..i view the source and i find the panel with its contents then why the popup window doesnot appear.
my aspx::
<asp:Panel id="master_editMode" runat="server" >
<div id="masterDiv" style="width:98%" dir="rtl">
<div id="masterControls" align="center">
<table border="0" width="98%">
<tr>
<td align="center" dir="rtl">
<asp:ObjectDataSource ID="ObjDS_AllTasks" runat="server"
SelectMethod="Get_All_Tasks" TypeName="DocumentFlowModuleDTO.TaskDTO">
</asp:ObjectDataSource>
<asp:HiddenField ID="hd_Task_Code" runat="server" />
<table>
<tr>
<td>
<asp:Label ID="Label11" runat="server" Text="Search for Task" Visible="False"></asp:Label>
</td>
<td align="right">
<asp:TextBox ID="txt_Search" runat="server" AutoPostBack="True"
ontextchanged="txt_Search_TextChanged" Width="200px" Visible="False"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
<asp:GridView ID="grd_AllTasks" runat="server" AllowPaging="True"
AutoGenerateColumns="False" CssClass="Alternating" DataKeyNames="task_code"
DataSourceID="ObjDS_AllTasks"
onpageindexchanging="grd_AllTasks_PageIndexChanging"
onrowdatabound="grd_AllTasks_RowDataBound" style="margin-right: 0px">
<RowStyle VerticalAlign="Top" />
HeaderText="ÍÐÝ">
<ItemTemplate>
<asp:ImageButton ID="btn_Delete_Task" runat="server"
CommandArgument="<%# Bind('task_code') %>" Height="33px"
ImageUrl="~/Images/delete.png" oncommand="btn_Delete_Task_Command"
Width="67px" />
<cc1:ConfirmButtonExtender ID="btn_Delete_Task_ConfirmButtonExtender"
runat="server" ConfirmText="åá ÊÑíÏ ÍÐÝ æËíÞÉ ÇáÇÚÊãÇÏ " Enabled="True"
TargetControlID="btn_Delete_Task">
</cc1:ConfirmButtonExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Right" />
</asp:GridView>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" dir="rtl">
<asp:Label ID="lbl_TaskName" runat="server" Font-Bold="True" Font-Size="13pt"></asp:Label>
</td>
</tr>
<tr>
<td align="center" dir="rtl" style="height: 196px">
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_No_States" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
</td>
<td align="right">
<asp:ImageButton ID="btn_AddStatesToTask" runat="server"
ImageUrl="Images/add.png" onclick="btn_AddStatesToTask_Click" Visible="False" />
<asp:Button ID="Dummy_btn2" runat="server" Text="Button" Style="display:none;" />
<cc1:ModalPopupExtender ID="btn_AddStatesToTask_ModalPopupExtender"
runat="server"
TargetControlID="Dummy_btn2"
BackgroundCssClass="modalBackground"
PopupControlID="pnl_Add_States"
DropShadow="True">
</cc1:ModalPopupExtender>
</td>
</tr>
</table>
<asp:HiddenField ID="hd_StateSerial" runat="server" />
<asp:HiddenField ID="hd_StateRowIndex" runat="server" />
<asp:GridView ID="grd_States" runat="server" AllowPaging="True" DataKeyNames="state_serial"
onpageindexchanging="grd_States_PageIndexChanging" Visible="False"
CssClass="Alternating" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="state_name" HeaderText="ÇáãÑÍáÉ"
ShowHeader="False" />
<asp:BoundField DataField="state_order" HeaderText="ÊÑÊíÈ ÇáãÑÍáÉ"
ShowHeader="False" />
<asp:TemplateField HeaderText="Power" ShowHeader="False">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="chb_StatePower" runat="server"
Checked='<%# Convert.ToBoolean(Eval("power_flag")) %>' Enabled="False" />
</ItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="New" ShowHeader="False">
<EditItemTemplate>
<asp:CheckBox ID="CheckBox3" runat="server" />
<asp:Button ID="Dummy_btn4" runat="server" Text="Button" Style="display:none;" />
<cc1:ModalPopupExtender ID="btn_TaskState_Edit_ModalPopupExtender" runat="server"
TargetControlID="Dummy_btn4"
BackgroundCssClass="modalBackground"
PopupControlID="pnl_Add_States"
DropShadow="True">
</cc1:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ÍÐÝ" ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="btn_TaskState_Delete" runat="server"
CommandArgument="<%# Bind('state_serial') %>" Height="26px"
ImageUrl="~/Images/delete.png" oncommand="btn_TaskState_Delete_Command"
Width="47px" />
<cc1:ConfirmButtonExtender ID="btn_TaskState_Delete_ConfirmButtonExtender"
runat="server" ConfirmText="åá ÊÑíÏ ÍÐÝ ÇáãÑÍáÉ " Enabled="True"
TargetControlID="btn_TaskState_Delete">
</cc1:ConfirmButtonExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:ObjectDataSource ID="ObjectDataSource_States" runat="server"
SelectMethod="Select_TaskStates" TypeName="DocumentFlowModule.DTO.TaskStateDTO">
<SelectParameters>
<asp:Parameter Name="task_code" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnl_Add_Task" runat="server" CssClass="modalPopup"><%-- Style="display:none;"--%>
<div id="div3" style="width: 95%">
<div id="div4" align="center">
<table>
<tr>
<td>
<asp:UpdatePanel ID="UpPnl1" runat="server">
<ContentTemplate>
<table dir="rtl" style="text-align: right">
<tr bgcolor="#f1ece2">
<th align="right" height="35" valign="middle" colspan="3">
<asp:Label ID="lbl_New_Task" runat="server" Font-Bold="False" Font-Size="14pt"
Text="ÅÖÇÝÉ æËíÞÉ ÇÚÊãÇÏ" Visible="False"></asp:Label>
<asp:Label ID="lbl_Edit_Task" runat="server" Font-Bold="False" Font-Size="14pt"
Text="ÊÚÏíá æËíÞÉ ÇÚÊãÇÏ" Visible="False"></asp:Label>
</th>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label1" runat="server" Text="Task Name"></asp:Label>
</td>
<td style="width: 140px">
<asp:TextBox ID="txt_TaskName" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txt_TaskName" ErrorMessage="*" ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label10" runat="server" Text="DataBase Name"></asp:Label>
</td>
<td style="width: 140px">
<asp:DropDownList ID="ddl_DataBases" runat="server" AutoPostBack="True"
onselectedindexchanged="ddl_DataBases_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="ddl_DataBases" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label2" runat="server" Text="Table Name"></asp:Label>
</td>
<td style="width: 140px">
<asp:DropDownList ID="ddl_Tables" runat="server" AutoPostBack="True"
ondatabound="ddl_Tables_DataBound"
onselectedindexchanged="ddl_Tables_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="ddl_Tables" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label17" runat="server" Text="Table Key"></asp:Label>
</td>
<td style="width: 140px">
<asp:Label ID="lbl_Key" runat="server"></asp:Label>
<asp:CheckBoxList ID="cbl_Columns" runat="server">
</asp:CheckBoxList>
</td>
<td>
<asp:Label ID="lbl_Select_Key" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label18" runat="server" Text="Current Record State"></asp:Label>
</td>
<td style="width: 140px">
<asp:DropDownList ID="ddl_Columns" runat="server" AutoPostBack="True"
ondatabound="ddl_Columns_DataBound">
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="ddl_Columns" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label5" runat="server" Text="Form View "></asp:Label>
</td>
<td style="width: 140px">
<asp:TextBox ID="txt_F_View" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server"
ControlToValidate="txt_F_View" ErrorMessage="*" InitialValue="--Select--"
ValidationGroup="G1"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="title" width="160">
<asp:Label ID="Label6" runat="server" Text="Form New"></asp:Label>
</td>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td dir="rtl" align="center">
<asp:ImageButton ID="btn_OK" runat="server" ImageUrl="~/Images/add.png"
onclick="btn_OK_Click" ValidationGroup="G1" Visible="False" />
<asp:ImageButton ID="btn_Edit" runat="server" ImageUrl="~/Images/edit.png"
onclick="btn_Edit_Click" ValidationGroup="G1" Visible="False" />
<asp:ImageButton ID="btn_Cancel_Task" runat="server" CausesValidation="False"
Height="36px" ImageUrl="~/Images/cancel.png" onclick="btn_Cancel_Task_Click" />
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
the btn_add _task does not make my popup appear just freeze the parent page
my .cs
protected void btn_Add_Task_Click(object sender, EventArgs e)
{
//AjaxControlToolkit.ModalPopupExtender modal1 = (AjaxControlToolkit.ModalPopupExtender) table1.FindControl("btn_Add_Task_ModalPopupExtender");
//modal1.Show();
grd_States.Visible = false;
lbl_No_States.Text = "";
btn_AddStatesToTask.Visible = false;
lbl_TaskName.Text = "";
//master_editMode.Visible = true;
//pnl_Add_Task.Visible = true;
btn_OK.Visible = true;
btn_Edit.Visible = false;
lbl_New_Task.Visible = true;
lbl_Edit_Task.Visible = false;
txt_TaskName.Text = "";
ddl_DataBases.ClearSelection();
ddl_Tables.Items.Clear();
ddl_Columns.Items.Clear();
cbl_Columns.Items.Clear();
txt_F_New.Text = "";
txt_F_View.Text = "";
txt_Params.Text = "";
txt_SP_Name.Text = "";
btn_Add_Task_ModalPopupExtender.Show();
}
EDITED::
<table align="center" dir="rtl">
<tr>
<td >
<asp:Button ID="Dummy_btn" runat="server" Text="Button" Style="display:none;" />
<asp:Button ID="btn_Add_Task" runat="server" Text="ÅÖÇÝÉ æËíÞÉ ÇÚÊãÇÏ ÌÏíÏÉ"
onclick="btn_Add_Task_Click" Font-Bold="True" Font-Size="12pt"
ForeColor="#0066FF" />
<cc1:ModalPopupExtender ID="btn_Add_Task_ModalPopupExtender" runat="server"
TargetControlID="Dummy_btn"
PopupControlID="pnl_Add_Task"
BackgroundCssClass="modalBackground"
DropShadow="True" >
</cc1:ModalPopupExtender>
</td>
</tr>
</table>`
I am using a 5 file upload controls on my page within a Create User Wizard.
In a modal pop up extender, I have a animated ajax gif with a message
"loading"
When I submit the button (see code below )to send the form, the modal pop up shows up,but the image is not animated. If I put the button below in an update panel it works with animation. But if I add a twigger for the button as the file upload controls needs a postbackthe image is static again. Is there anywhere I can display an animated image in the modal pop up and still keep my existing code.?
ID="StepNextButton"
runat="server" [code]......
Any code related to modal popup to stablise is necessary and if the values are enter correctly then modal popup should get post back.
View 4 RepliesIs it possible to use buttons in a modal popup window and not have the window close after the postback?
View 2 RepliesI try to create a asp.net 4 webpage, using masterpage.
On webpage I have a formview and inside the formview I have a ajax modalpopup. I have multiple buttons and textboxes on the modalpopup, and created a test event, but I still get the message that the textbox is not declared.
Here is how the code is set at this point:
[Code]....
modalextender.show();
i want to create an onclientclick event on a button to show ajax modal pop up but from code behind ie is in aspx.cs
So I have a button on form that is supposed to execute some code-behind on a click event. To this button I also connected a Modal Popup Extender, which once you click OK, it goes away. What doesn't happen (and it should) is btnSendContactForm_Click never gets called.
Using the OnOkScript didn't help me either. I have tried setting the OnOkScript property of the extender, by calling a javascript that simulates the button click on the send button, but that only re-calls the modal pop extender, and a never-ending loop results everytime you click OK.
<!-- Send Button, Extender, and Pop Up Panel -->
I want to show model popup, I have One asp page in that Collapsible Panel and tow user control and one button, Suppose I click on button then show the model popup and hide the panel and user controls..
View 1 Repliesfunction showPopupClick() {
$find("my_ace1").showPopup();
}
Although I can debugger-watch the ace returned by $find. If I call showPopup() it only returns undefined.
I am trying to get a modal popup inside a modal popup?, also i want to fire the modal popup on a condition in a text change event of a textbox?...is this possible and can anyone give me directon on this
View 5 RepliesI'm using modal popup extender and panel with calendar in it. Click the "Next / Previous Month" closes the modal popup. How do I tell the modal popup to ignore click events in a calendar control inside the panel targeted for popup? I'm confused because when using extender before, you had to click OkButton or Cancel to close popup. I have update panel for reason. I just minimized the code for easy review.
[Code]....
I want to create a good Pop up on button click. pop up whose "height" , "width" can be controlled. It can be either Jquery pop up or Javascript. In this pop up I want to use asp.net controls and ajax (as normal webpage functionality but in form of pop up) also its background should be little blur when pop up is open.How can i create such pop up?
View 1 RepliesI'm in a Unique position where I have to display one popup above another popup. Problem is that popup B's background does not show above popup A's content and as such you ae still able to click on buttons, ect. on popup A.
I tried to rather disable the Tab Control on popup A with javascript once popup B is displayed, but it only disables textboxes and labels and nothing else.
getting popup B's background to display above popup A or help with disabling all controls (Contained in Tab Control) on popup A?
So, I have a button that populates a datagridview and shows it to the user. What I'd like to do is show a popup from this button just after it's done with the server logic. How can I do that.
View 5 RepliesI have a modal popup with an image cropping tool I wrote in JavaScript and it passes the coordinates to the codebehind on postback. Anywho... for some reason when I call the Show() method the modal popup is rendered 3/4 of the way down the screen. I checked firebug to see what CSS might be conflicting but found nothing to be conflicting with it. If I enable the reposition modes it will adjust to the correct position on scroll or resize but not when it is rendered.
View 3 RepliesI have a datalist that displays all records from table but i have a button select on the datalist and i want to use the button to select each record of the column and display it on modal...here is my code
GetPost2(username);
}
}
public void GetPost2(string username)
{
// int followerid;
[code]....
[Code]....
[Code]....
Anyone run in to this problem?
Ive used code that will allow me to find a modalpopup control through code behind and then show it to the user using the Show() method.The code works perfectly fine in some of my pages but not in others!Ive used breaks in my codebehind and it does find the popup and it goes into the Show() method but nothing pops up ?
View 21 RepliesI want in my web application that when user opens the website, the very first screen should be a login modal pop up in the centre of the page and every thing around should be transparently black. This screen will take inputs i.e, ID and PW to login and will show other options like to register or visit as a guest.
View 1 RepliesI have a modal popup that on the first time it is running, if the user clicks the greyed out background the modal closes. On the 2nd and later times it runs correctly. The user can click the background and it works correctly. I have searched around and tried a few things with out any luck.
Here is the code.
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"> </telerik:RadScriptManager>
<ajax:ModalPopupExtender ID="GlobalModalPopupExtender" runat="server" PopupControlID="GlobalpnlPopup" TargetControlID="GlobalMain" BackgroundCssClass="modal_background"> </ajax:ModalPopupExtender>
<div id="GlobalMain" runat="server"> </div> <asp:Panel ID="GlobalpnlPopup" runat="server" Style="display: none; background-color: White; border-width: 4px; border-style: solid; border-color: #EA0A8D; padding: 4px; height: 40px; width:
200px; z-index: 10000; " CssClass="RadButton"> <table align="center"> <tr> <td align="center"> <asp:Image ID="imgGlobalProcessing" CssClass="progress_image" runat="server" ImageUrl="~/images/ajax-loader.gif"
/> <b>Processing...</b> </td> </tr> </table> </asp:Panel>
<script type="text/javascript">
Sys.Application.add_load(GlobalApplicationLoadHandler);
function GlobalApplicationLoadHandler(sender, args) { var prm = Sys.WebForms.PageRequestManager.getInstance(); if (!prm.get_isInAsyncPostBack()) { prm.add_initializeRequest(initRequest); prm.add_endRequest(endRequest);
} } function timer() { return true; }
function initRequest(sender, args) { var pop = $find("<%=GlobalModalPopupExtender.ClientID%>"); pop.show(); }
function endRequest(sender, args) { var pop = $find("<%=GlobalModalPopupExtender.ClientID%>"); pop.hide(); } </script>
.modal_background { background-color:Gray; filter:alpha(opacity=65); -moz-opacity:0.65; /* It is for Mozilla firefox browser */ Opacity:0.65; }
There is a Gridview in my web page with a Hyperlink & ImageButton inside it.HTML code:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="100%" PageSize="5" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" BorderColor="#e5e4e2" BorderStyle="solid" BorderWidth="2px">
<RowStyle CssClass="Grid" />
<Columns>
<asp:BoundField HeaderText="Id" DataField="id"/>
[CODE]..
I wat to know 2 different things, using above Gridview Layout:1) when I click on only Gridview "Hyperlink", it should open a modal Popup with 1 Gridview inside modal Popup. And close modal Popup when clicking on cancel button.2) How to navigate to other ".aspx page", when clicking on Gridview "Hyperlink" OR "ImageButton" inside above Grid.
i want to display the details of datalist of partiicular row using jquery, on click of hyperlink "view" inside datalist item template .. i want to avod ajax popup modal
View 1 RepliesOn my .aspx page I have textbox and button1.
In the click event handler in code behind page, I am using as .net mailmessage class to send the message.
Once the code has executed, I want to show the sender a confirmation box on aspx page, perhaps using modal pop extender.
[code]...
I have a dropdown list which has states retrieved from a table. I want to have an option to add new states.. I have added a list item NEW in the dropdown. When I click on NEW i should get a pop up to add a new state and goes in the table.
View 1 Replies