To show Modalpopup in JavaScript

Question

I have a modal popup extender as follows

<div id="target" runat="server"></div>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID ="Modal"
    runat="server" TargetControlID="target"
    BackgroundCssClass="modalBackground"
    PopupControlID="Panel1"></cc1:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server">
  <asp:Login ID="Login1" Width="360px" Height="135px" BackColor="lightSteelBlue"
        LoginButtonStyle-BorderStyle="groove" TextBoxStyle-CssClass="textbox"
        LoginButtonStyle-CssClass="loginbutton" runat="server" >
    <TextBoxStyle CssClass="textbox" />
    <LoginButtonStyle BorderStyle="Groove" CssClass="loginbutton" />
  </asp:Login>
</asp:Panel>

On clicking on one button i have to show modalpopup. What code i can write in JavaScript to call modalpopup.Can anybody help.

Solution 1

var modalDialog = $find("ModalPopupExtender1"); 
// get reference to modal popup using the AJAX api $find() function

  if (modalDialog != null) {
    modalDialog.show();
  }

Solution 2

The point of the ModalPopupExtender is that you do not have to write any JS. It does all the plumbing for you. You can look up the ASP.Net AJAX Controltoolkit Website for a manual on how to configure it: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx

Comments

[Tim Scarborough]

Set the ModalPopupExtender BehaviorID property and use that in your $find call. The ClientID of the mpe might not be what you're expecting.