时间戳

首页 > 解决方案 > 模态弹出时屏幕变暗

html - 模态弹出时屏幕变暗

问题描述

当我的模态弹出时，我试图使屏幕的其余部分变暗。我从这里得到了代码：https ://jasonwatmore.com/post/2018/05/25/angular-6-custom-modal-window-dialog-box

最终发生的事情是，即使在我打开模块之前，我的整个屏幕都变暗且不透明。

我不确定我在 CSS 中是否做错了，或者在 HTML 中是否有错误

这是我的代码：

....

/* MODAL STYLES
-------------------------------*/
.closed{
  display:none;
}
  .modal {
      /* modal container fixed across whole screen */
      background: #fff;
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // top: 0;
      // right: 0;
      // bottom: 0;
      // left: 0;

      /* z-index must be higher than .modal-background */
      z-index: 1000;

      /* enables scrolling for tall modals */
      overflow: auto;

      .modal-body {
          padding: 20px;
          background: #fff;

          /* margin exposes part of the modal background */
          margin: 40px;
      }
      .modal-header{
        padding: 20px;
        background: #fff;

        /* margin exposes part of the modal background */
        margin: 40px;
      }

  }

  .modal-background {
      /* modal background fixed across whole screen */
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      /* semi-transparent black  */
      background-color: #000;
      opacity: 0.75;

      /* z-index must be below .modal and above everything else  */
      z-index: 1;
  }


body.modal-open {
  /* body overflow is hidden to hide main scrollbar when modal window is open */
  overflow: hidden;
}

....

HTML：



<modal id="custom-modal-2" >
    <div class="modal" style="height:100px; width: 100px;">
        <div class="modal-body">
            <h1 >A Custom Modal!</h1>
            <p>
                Home page text: <input type="text" [(ngModel)]="bodyText" />
            </p>
            <button (click)="closeModal('custom-modal-2');">Close</button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

标签： htmlcssangularmodal-dialog

解决方案

因此，您的模式设置为自动显示，因此一旦将其添加到您的页面，您就会显示整个内容。您可以将“关闭”类作为默认值添加到您的模式中，然后让打开和关闭按钮更改该值。

如果您还没有这样做，您可能需要考虑的一件事是让模态的状态为 isOpen，然后让它成为它是否显示模态的触发器。我建议这样做的原因是，这种方式的逻辑基于您可以在 Javascript 本身中看到的内容，并使用 {{isOpen}} 来控制它，而不是添加和删除一个类。

推荐阅读