Appear in Online Interview to test your skills and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Submit content and win cash & prizes monthly.

Win Prizes

Like us on Facebook
Top Blogs Author
Thu, 24-Apr-2014 Authors
All Time Authors

Latest members | More ...

(Statistics delayed by 5 minutes)

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

Posted by Jeyaganeshmuniyandi under ASP.NET AJAX on 3/30/2012 9:57:20 AM | Points: 75 | Views : 7982 | Status : [Member]


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" />

M.Jeya ganesh
Found interesting? Add this to:

Comments or Responses

Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.