在JavaScript中显示模态弹窗

Question

我有一个模态弹出扩展程序，如下所示：

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

点击一个按钮后，我需要显示一个模态弹出框。我应该在JavaScript中写什么代码来调用模态弹出框？有人可以帮忙吗？

- user42348

Answer 1

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

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

- rahul

---

我尝试过这个。但是modalDialog得到了null。可能的原因是什么？ - user42348

设置ModalPopupExtender的BehaviorID属性，并在$find调用中使用它。mpe的ClientID可能不是您预期的内容。 - Tim Scarborough

Answer 2

ModalPopupExtender 的优点在于您不必编写任何 JS 代码，它会为您处理所有的管道。您可以查阅 ASP.Net AJAX Controltoolkit 网站上的手册以了解如何配置它：http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx。

- Manu

Answer 3

正如Manu所说，您不需要编写任何JavaScript来触发弹出窗口。

您只需要将LinkButton拖放到页面上，并将其设置为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>

然后当您点击链接时，模态框将会打开。

- Kirschstein