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

Open/Close or Show/Hide Ajax Modalpopupextender using JavaScript in

Dec 24, 2011

Here I will explain how to show/hide Ajax modalpopupextender using JavaScript in


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() {
//Function to Show ModalPopUp
function Showpopup() {

Here 'ModalPopupExtender1' is our modalpopupextender id.

Our Sample Page will be like this

<html xmlns="">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
//Function to Show ModalPopUp
function Showpopup() {
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
CancelControlID="btnNo" BackgroundCssClass="modalBackground">
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" style="display:none">
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" />

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, 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


Anonymous said...

I am totally fresher from Pune,India,searching job in development in pune.What actually I want to prepare for interview?

Heartly waiting for reply....
Thank You...

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

Hi Kavita,

Start preparing for interview questions on 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:-


Nitin Tyagi
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 but without using ajax .
Please give me code.

Nikhil Kashid said...

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

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

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 dropdown value is bind from database regarding that value i want the popup window..
this is my mail id:plz give me a solution

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

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

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

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

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:
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 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.