To show Modalpopup in javascript

Question

hi guys, 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 javscript to call modalpopup.Can anybody help.

Answer 1

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

Answer 2

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

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

Answer 3

As Manu has already said, you don't need to write any javascript to trigger the popup.

All you need to do is drop a LinkButton onto the page and set that as the TargetControlID

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


<asp:LinkButton id="lbOpenModal" runat="server" Text="Click me"></asp:LinkButton>

Then when you click the link, the modal will open.