Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Open/Close or Show/Hide Ajax Modalpopupextender using JavaScript in asp.net

Dec 24, 2011
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

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 RSS subscribe by email Subscribe by Email

19 comments :

Anonymous said...

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...

Nitin Tyagi said...
This comment has been removed by the author.
Nitin Tyagi said...

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

Unknown said...

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.

Nikhil Kashid said...

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

Anonymous said...

Good post very helpfull.

I want to ask u one thing how can i show alert message on modal popuu

Anonymous said...

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 !!

Suma said...
This comment has been removed by the author.
click here said...

hi, thanks for the works, now i know hot to using JavaScript in asp.net

Unknown said...

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

Anonymous said...

Thank You

Anonymous said...

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..

deepak said...

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.....

Unknown said...

hi,
I want to open model popup on button click, but cant be open.
please help me.
Ashish
Software Developer
Gurgaon
09210906006

sudhir said...
This comment has been removed by the author.
sudhir said...

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

deepak said...

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....

Anonymous said...

how to fire cancel button event in modal popup?

Abhijeet said...

Nice post

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.