html - 模式弹出时使屏幕变暗

Question

当我的模式弹出时，我试图使屏幕的其余部分变暗。我从这里得到代码: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>

Answer 1

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

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