Question

aspx代码

  <asp:ModalPopupExtender ID="MPE" runat="server" BackgroundCssClass="modalBackground"
        PopupControlID="pnlGame" CancelControlID="imgCloseBtn" TargetControlID="btnHidden">
    </asp:ModalPopupExtender>
    <asp:Button runat="server" ID="btnHidden" Style="display: none" />
    <asp:Panel ID="pnlGame" runat="Server" CssClass="pnl">
        <div class="MsgPopup">
            <%--<fieldset class="">--%>
            <table style="height: 100%; width: 100%;">
                <tr>
                    <td colspan="2" style="padding-top: 5px; padding-left: 4px;">
                        <table border="0" class="" style="width: 500px;">
                            <tr>
                                <td align="center">
                                    <img src="../img/exclaimationIcon.jpg" width="65px" height="56px" alt="" />
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div id="GameName" style="font-size: medium; width: 500px; font-size: 17px; font-weight: bold;
                                        font-family: Arial; color: Black; font-variant: normal">
                                        Please select the Child, From and To Dates
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <asp:ImageButton ID="imgCloseBtn" runat="server" Height="38px" ImageUrl="~/img/okButton.jpg"
                                        Width="91px" ToolTip="Close" CausesValidation="False" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </asp:Panel>

cs code：

ScriptManager.RegisterStartupScript(Page, this.GetType(), "TestInitPageScript031",
                string.Format("<script type=\"text/javascript\">ShowReport();</script>"), false);

Javascript代码：

 <script type="text/javascript">
          function ShowReport() {
              var Asgn1 = document.getElementById("<%=ddlAssignments.ClientID%>").value;
              var Assn1 = document.getElementById("<%=ddlAssessment.ClientID%>").value;
              var Asgn2 = document.getElementById("<%=ddlAssignments1.ClientID%>").value;
              var Assn2 = document.getElementById("<%=ddlAssessment1.ClientID%>").value;
              alert(Asgn1);
              if (Asgn1 == 0)
              {
                  $find('<%= MPE.ClientID %>').show();
                  return false;
              }
          }
      </script>

这是我的简短代码。问题是我的模态弹出窗口没有显示。我可以在警报中追踪到我得到的0;但模态弹出不显示。谁能帮我解决一下？

Answer 1

为模态弹出扩展器设置 BehaviorID ..

 <asp:ModalPopupExtender ID="MPE" runat="server" BackgroundCssClass="modalBackground"
        PopupControlID="pnlGame" CancelControlID="imgCloseBtn" BehaviorID="PopUp"TargetControlID="btnHidden">
    </asp:ModalPopupExtender>

<强>使用Javascript：

 <script type="text/javascript">
          function ShowReport() {
              var Asgn1 = document.getElementById("<%=ddlAssignments.ClientID%>").value;
              var Assn1 = document.getElementById("<%=ddlAssessment.ClientID%>").value;
              var Asgn2 = document.getElementById("<%=ddlAssignments1.ClientID%>").value;
              var Assn2 = document.getElementById("<%=ddlAssessment1.ClientID%>").value;
              alert(Asgn1);
              if (Asgn1 == 0)
              {
                  $find("<%=ModalPopupExtender1.BehaviorID%>").show();
                  return false;
              }
          }
      </script>

请参阅this以获取额外阅读..

Answer 2

asp:ModalPopupExtender是服务器控件如果您想要显示它，您就可以发布服务器端 Show()事件;客户端（我的意思是javascript）将无效。

如果你需要在客户端工作，使用jQuery，你不需要服务器端控件：窗口顶部的隐藏div设置就足够了。

HTML

<div class="outerframe">
 <div class="innerframe"  >
 ...

CSS

.outerframe {
background: url('../Images/site-bg2.png');
width: 100%;
height: 100%;
position:absolute;
display:block;
text-align: center;
top: 0px;
left: 0px;
z-index: 1000;
}

 .innerframe {
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1200px;
text-align: left;
overflow: auto;
background: #ffffff; /* Fills the page */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ffffff, #eeeeee); /* for firefox 3.6+ */

}

模态弹出不起作用

2 个答案: