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
|
|||
19 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
hai,i want this modal popup window in when i select the dropdown value..EG.for each list item in dropdown i want to show one instruction popup window..i try but i can.t get plz help for me...my dropdown value is bind from database regarding that value i want the popup window..
this is my mail id:plz give me a solution manosekar18@gmail.com
Thank You
How can I open a div as a popup then inside the div popup controls or by using any of Image/Button controls in Div popup I want to open one more Div as a popup plz ans the code with live example plz..
hey...
i want to show a modal popup to be shown only once the page load.
Plzzz reply as soon as possible.
Thanks in advance.....
hi,
I want to open model popup on button click, but cant be open.
please help me.
Ashish
Software Developer
Gurgaon
09210906006
hi
i want to open image in modalpopupextender when click on datalist image button. i am stick to this problem for 4 days and yet not solved please send me an example with running demo .
thank you
regards sudhir
email id: sudhirkumar860@gmail.com
contact no 8699392256
hey... plzzzzz help me as soon as possible
i want to show a modal popup to be shown only once the page load.
Plzzz reply as soon as possible.
Thanks in advance....
how to fire cancel button event in modal popup?
Nice post
Note: Only a member of this blog may post a comment.