Темнее экран, когда модал всплывает - PullRequest
Новая
       21

Темнее экран, когда модал всплывает

0 голосов
/ 10 мая 2019

Я пытаюсь затемнить остальную часть экрана, когда мой модал всплывает. Я получил код отсюда: 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>

1 Ответ

0 голосов
/ 10 мая 2019

Таким образом, ваш модал настроен на автоматическое отображение, и вы отображаете все это сразу после добавления на свою страницу. Вы можете добавить «закрытый» класс в ваш модальный по умолчанию, а затем с помощью кнопки «открыть» и «закрыть» изменить это значение.

Одна вещь, которую вы, возможно, захотите рассмотреть, если вы еще этого не делаете, - это наличие модального состояния с состоянием isOpen, а затем наличие этого триггера для отображения модального режима. Причина, по которой я бы предложил это, заключается в том, что таким образом логика основана на чем-то, что вы можете видеть в самом Javascript, и управляете этим с помощью {{isOpen}}, а не добавляя и удаляя класс.

...