Introduction:
Here I will explain how to show/hide Ajax modalpopupextender using JavaScript in asp.net.
Description:
In previous posts I explained some of the samples relating to Ajax modalpopupextender. During the time whenever I worked on to prepare samples for Ajax modalpopupextender I got requirement like close the modalpopupextender whenever I click on close icon for that more check this example Ajax Confirmation box. Generally in Ajax modalpopupextender we will set two properties TargetControlID and CancelControlID like
Here I will explain how to show/hide Ajax modalpopupextender using JavaScript in asp.net.
Description:
In previous posts I explained some of the samples relating to Ajax modalpopupextender. During the time whenever I worked on to prepare samples for Ajax modalpopupextender I got requirement like close the modalpopupextender whenever I click on close icon for that more check this example Ajax Confirmation box. Generally in Ajax modalpopupextender we will set two properties TargetControlID and CancelControlID like
Ex: TargetControlID="btnShowPopup" CancelControlID="btnNo"
|
Here whenever we click on btnShowPopup button control modalpopupextender will show popup and when we click on btnNo button it will close the popup. Now I want to open popup and close popup whenever click on other button controls also in that case what we can do? By using JavaScript $find() function we can show or hide modalpopupextender easily.
JavaScript Functions will be like this
<script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('ModalPopupExtender1').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('ModalPopupExtender1').show();
}
</script>
|
Here 'ModalPopupExtender1' is our modalpopupextender id.
Our Sample Page will be like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('ModalPopupExtender1').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('ModalPopupExtender1').show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
CancelControlID="btnNo" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" style="display:none">
<div>
Confirm Box
<a href = "javascript:void(0)" onclick = "closepopup()">Hide PopUp</a>
<a href = "javascript:void(0)" onclick = "Showpopup()">Show PopUp</a>
<asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg"/>
<asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />
</div>
</asp:Panel>
</form>
</body>
</html>
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
9 comments :
I am totally fresher from Pune,India,searching job in asp.net development in pune.What actually I want to prepare for interview?
Heartly waiting for reply....
kavitamore1990@gmail.com
Thank You...
Hi Kavita,
Start preparing for interview questions on asp.net and sql server. And make sure to grasp the basics as well. You will find the complete list of questions on this link and google them for more:-
http://www.aspdotnet-suresh.com/search/label/Interview%20Questions
Regards,
Nitin Tyagi
nitin.engg88@gmail.com
Web Developer,Mumbai
Hi I have one doubt..
I want to show popup window in pageload event and show data from database in that popup window in asp.net but without using ajax .
Please give me code.
Hi,
I m Nikhil working as a software Developer,pune
I m using 3rd party toolkit(Krypton toolkit) but it give some error
The control ComponentFactory.Krypton.Toolkit.KryptonTextBox has thrown an unhandled exception in the designer and has been disabled.
Exception:
Unable to cast object of type 'ComponentFactory.Krypton.Toolkit.KryptonTextBox' to type 'ComponentFactory.Krypton.Toolkit.KryptonTextBox'.
Stack trace:
at ComponentFactory.Krypton.Toolkit.KryptonTextBoxDesigner.get_SelectionRules()
Plz give a ans.
Thanks & Regards
Nikhil
kashidnikhil33@gmail.com
Good post very helpfull.
I want to ask u one thing how can i show alert message on modal popuu
There is one problem I am facing in ModalPopUp Extender ........ If I try to redirect to another webpage from the ButtonClick() function ...... It is giving an error !! ....... How can I redirect ....... Have searched many sites ....... No help !!
hi, thanks for the works, now i know hot to using JavaScript in asp.net