Пользовательский модальный стиль CSS работает на Chrome не сафари - PullRequest
Новая
       11

Пользовательский модальный стиль CSS работает на Chrome не сафари

0 голосов
/ 14 января 2019

У меня есть модал, который я создал, используя ReactDOM.createPortal();. Это работает хорошо, за исключением того, что я не могу придать модальности стиль, который работает как в Chrome, так и в Safari.

HTML: 

<body>
  <div id="main">
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
  </div>

  <div id="portal">
    <div>
      <div class="modal-wrapper">
        <div class="modal-card">
          <div class="row">
          </div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="background-overlay"></div>
      </div>
    </div>
  </div>
</body>

СКС: 

#portal {
  .modal-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  overflow: hidden;
  max-height: 100%;
  .modal-card {
    background: white;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
    max-width: 800px;
    margin-top: 10px;
    width: 50%;
    overflow: auto;
    padding: 10px;
    max-height: 90%;
  }
  .close-button {
    position: relative;
  }
  .background-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0.5;
  }
}
}

Пожалуйста, смотрите https://jsfiddle.net/alisonmtague/am5jfr37/26/ с использованием как сафари, так и хрома.

В Safari .background-overlay перекрывает .modal-card, и вы не можете прокручивать модал (вместо этого прокручивается фоновая страница). Я ожидаю, что содержимое создаваемого мной модала будет довольно большим, поэтому мне нужно, чтобы модал можно было прокручивать. В идеале я бы хотел, чтобы #main div не прокручивал, когда модал открыт.

Изменение z-индекса не решает проблемы

1 Ответ

0 голосов
/ 14 января 2019

Когда вы открываете модал, примените класс к вашим <body> (т.е. fixed) и: 

body.fixed {
  overflow: hidden;
  position: fixed;
}

Очевидно, , вам нужно удалить его при закрытии модального.

Кроме того, ваш модальный контейнер прокрутки должен иметь: 

{
  -webkit-overflow-scrolling: touch;
}

..., кроме overflow-y: auto; и фиксированной высоты, меньшей 100vh. Вот и все.

Примечание: В зависимости от устройства, версии Safari и версии iOS вам могут не понадобиться оба (второй - самый важный), но с обоими вы получите максимальную совместимость.

Ref: "В Safari .background-overlay накладывается на .modal-карту, и вы не можете прокрутить модал" :

Предполагается, что добавление position: relative; к .modal-card не сработает: что мешает вам поместить .background-overlay в качестве первого потомка .modal-wrapper и .modal-card в качестве второго?

...