Как сохранить модальный <details>элемент по центру и зафиксировать на странице (т.е. разрешить прокрутку фона) - PullRequest
Новая
       28

Как сохранить модальный <details>элемент по центру и зафиксировать на странице (т.е. разрешить прокрутку фона)

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

У меня есть клиент, который в настоящее время использует bootstrap для создания модального окна для формы lead-gen.Мы находимся в процессе редизайна страницы, и я хотел бы удалить весь этот раздуватель с страницы и полагаться на собственный элемент <details> для создания модального окна.

Элемент <details> достаточно прост в создании, но у меня возникают проблемы с его рендерингом, подобным модалу начальной загрузки.В частности, я хочу, чтобы элемент отображался по центру экрана (по вертикали и по горизонтали) независимо от того, где пользователь нажимает на элемент <summary>, чтобы вызвать его.Я также хочу, чтобы он оставался фиксированным в этом центрированном положении, если пользователь выполняет прокрутку, хотя, если модальный режим должен был бы обеспечивать прокрутку, если форма была выше, чем область просмотра (то есть мобильные устройства).

В настоящее время Github использует элемент <details> для всех своих модалов, и они отображают в точности так, как я описал выше (по центру по вертикали и горизонтали и фиксированы независимо от того, откуда он запущен).

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

Это код, который я скопировал непосредственно из GitHub: 

<details class="details-reset details-overlay details-overlay-dark" open="">
        <summary class="btn btn-danger boxed-action" role="button">Make public</summary>
        <details-dialog class="anim-fade-in fast Box Box--overlay d-flex flex-column" role="dialog" aria-modal="true">
          <div class="Box-header">

          </div>
        </details-dialog>
      </details>

details {
display: block;
}
details-dialog {
left: 50%;
margin: 10vh auto;
max-height: 80vh;
max-width: 90vw;
position: fixed;
top: 0;
transform: translateX(-50%);
width: 448px;
z-index: 999;
}
.d-flex {
display: flex!important;
}
flexbox.scss:11.flex-column {
flex-direction: column!important;
}

Приведенный выше код не сохраняет модальный режим фиксированным и открывается в контейнере, из которого он запущен (т. Е. Этот контейнер растет вертикально, и он не перекрывает содержимое, как при загрузке или включенииGitHub

...