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}}进行控制，而不是添加和删除类。

弹出模式对话框时变暗屏幕

1 个答案: