Question

我有一个包含模态弹出窗体的窗体，在单击按钮之前它会被隐藏。

当页面加载时，我想向用户显示警告，并且我尝试使用jquery

但是当显示警报时，模态弹出窗口可见，在警报上单击“确定”后，模态弹出窗口再次隐藏。显然有更好的方法，有人有任何建议吗？

这是代码：感谢

＆＃13;

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
  <style type="text/css">
    .modalBackground {
      background-color: Gray;
      z-index: 10000;
      filter: alpha(opacity=80);
      opacity: 0.8;
    }
    .hiddenElement {
      display: none;
    }
    .ModalContainer {
      position: absolute;
      display: table;
      background-color: White;
      border: 1px solid Gray;
    }
  </style>
  <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      alert('Logged In');
    });
  </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
  <asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
      <asp:Button ID="btnClick" runat="server" Text="Click me" OnClick="btnClick_Click" />
    </ContentTemplate>
  </asp:UpdatePanel>
  <asp:HiddenField ID="HiddenModalMore" runat="server" />
  <asp:ModalPopupExtender ID="MoreModal" TargetControlID="HiddenModalMore" runat="server" DropShadow="false" PopupControlID="pnlMoreInfo" BackgroundCssClass="modalBackground" />
  <asp:Panel ID="pnlMoreInfo" runat="server" CssClass="hiddenElement ModalContainer">
    <asp:UpdatePanel ID="up_More" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
        <table>
          <tr align="center">
            <td colspan="2">
              Test
            </td>
          </tr>
          <tr align="center">
            <td colspan="2" align="center">
              <asp:Button ID="btnSave_MoreInfo" runat="server" Text="Save" OnClick="btnSave_MoreInfo_Click" />
              <asp:Button ID="btnCancel_MoreInfo" runat="server" Text="Cancel" OnClick="btnCancel_MoreInfo_Click" />
            </td>
          </tr>
        </table>
      </ContentTemplate>
    </asp:UpdatePanel>
  </asp:Panel>

</asp:Content>

＆＃13;

Answer 1

在加载文档后，你的模态可能会被隐藏？因此，您的警报首先运行，然后您的代码隐藏弹出窗口。如果是这种情况，只需添加样式以隐藏弹出窗口。

你能告诉我们弹出窗口的html，所以我们不必猜测吗？

编辑：你在.ModalContainer中覆盖了你的知名度 - ＆gt; {display：table;}删除该行，或者在.ModalContainer之后移动.hiddenElement，以便最后应用。

Answer 2

在模态对话框中设置初始样式，以显示：CSS中的none或创建它的元素本身。如果yiu完全依赖于隐藏元素，则它们有可能在宿舍准备开始时和窗口加载之前闪烁。

Answer 3

使用以下内容更改您的风格：

.modalBackground {
    background-color: Gray;
    z-index: 10000;
    filter: alpha(opacity=80);
    opacity: 0.8;
    display: none;
}
.modalBackground.active {
    background-color: Gray;
    z-index: 10000;
    filter: alpha(opacity=80);
    opacity: 0.8;
    display: block;
}
.hiddenElement {
    display: none;
}
.ModalContainer {
    position: absolute;
    display: table;
    background-color: White;
    border: 1px solid Gray;
}

点击按钮，你必须设置：MoreModal.BackgroundCssClass = "ModalContainer active"

当$（document）.ready alert被调用时显示隐藏模态

3 个答案: