asked on

More AJAX ModalPopup Questions (with MasterPages)

I have created a master page and put a modalpopup, the associated panel, and dummy control, and am trying to launch it on a form's button click. The click event is called (a small javascript routine), but it does not finc the popup to tell it to "Show".

I have included all the code fragments. Pretty much everything is in the master page and the buttons appear and when I click the button on the default.aspx page I get the message that the javascript routine is being called, but the modalExtenderPopup id is not being found.

'SiteMaster.Master'
<%@ Master Language="VB" CodeFile="SiteMaster.master.vb" Inherits="SiteMaster" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    
<link href="css/SiteStyleSheet.css" rel="stylesheet" type="text/css" />
 
<link href="css/ModalPopupStyles.css" rel="stylesheet" type="text/css" />
   
<script language="javascript" type="text/javascript">
 
function HideModalPopup() 
{ 
  var modal = $find('mpe'); 
  if(modal)
  {
    modal.hide(); 
  }
  else
  {
  alert('Cannot find modal');
  }
}
 
function ShowMyModalPopup() 
{ 
  alert ('Hi');
 var modal = $find('mpe'); 
  if(modal)
  {
   modal.show(); 
  }
  else
  {
  alert('Cannot find modal');
  }
}
 
function fnClickUpdate(sender, e) 
{ 
  __doPostBack(sender,e); 
}
 
</script>   
    
</head>
<body>
 
    <form id="form1" runat="server">
    
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="485px" Width="645px" style="display:none">
 
    <center>
    <br />
    <IFRAME id="frame1" width="640px" height="480px" scrolling="auto" runat="server">
    </IFRAME>
    </center>
 
    <asp:Button ID="Button1" runat="server" Text="OK" /> 
    <asp:Button ID="Button2" runat="server" Text="Cancel" /> 
 
</asp:Panel>
 
<asp:Button runat="server" ID="txtDummy" style="display:none"  />
<ajaxToolkit:ModalPopupExtender  ID="mpe" runat="server"    
    TargetControlID="txtDummy"
    PopupControlID="Panel1"
    OkControlID="Button1"
    CancelControlID="Button2" 
    DropShadow="true"
    BackgroundCssClass="modalBackground"
    RepositionMode="RepositionOnWindowResize">
    
</ajaxToolkit:ModalPopupExtender>
 
<br />
        
</asp:contentplaceholder>
    </div>
    
<Button ID="cmdShowPage" value ="A Button" title="Buttonie" type="button" onclick="ShowMyModalPopup();">
    Abutton</Button><br />
    
    </form>
    
</body>
</html>
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'Modal Popup Styles Style Sheet
*Modal Popup*/
.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}
 
.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}
 
 
.modalPanelAsTable TABLE
   {
      border: #060F40 2px solid;
      color: #060F40;
      background: #ffffcc;
   }
 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Open in new window

ASKER CERTIFIED SOLUTION

David Robitaille

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial