Модальное всплывающее окно показывает свой переход на f5 - PullRequest
Новая
       28

Модальное всплывающее окно показывает свой переход на f5

0 голосов
/ 04 ноября 2019

Я создаю модальное всплывающее окно, используя :target без JavaScript. Все было замечательно, пока я не начал переход, чтобы сделать приятное появление / исчезновение. Модальное время перехода отображается при обновлении страницы. 

<a class = 'row__th__import' href="#popupTargets">Import</a>
...
<div class="popup" id="popupTargets">
   // some stuff
</div>

SCSS: 

.popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    box-shadow: 0 0 1px 100vw rgba(0, 0, 0, 0.7);
    margin: 3% auto;
    padding: 1%;
    background: $white;
    border-radius: 5px;
    width: 40%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: 500ms;
    &:target {
        opacity: 1;
        visibility: visible;
    }
}

Похоже, что скрытая видимость не влияет на этот элемент сразу при загрузке страницы

...