To show modalpopup in javascript

Question

I have a modal popup expander 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>

At the click of a button I should show modalpopup. What code can I write in javscript to call modalpopup.Can to help someone.

Answer 1

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

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

Answer 2

The point of ModalPopupExtender is that you do not need to write JS. He does all the plumbing for you. You can find the ASP.Net AJAX Controltoolkit website for guidance on setting it up: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx

Answer 3

Manu, - javascript .

All you have to do is reset LinkButton to the page and set it as 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 function will open.