Как переключить видимость всплывающего окна Flexbox с помощью jQuery?

Question

Так что я хотел бы иметь всплывающее окно на моей странице. Я хотел бы создать его с помощью flexbox. Я использую scss для создания стиля, и у меня есть mixins для свойств flexbox.

Проблема, которую я наткнулся на то, что я хочу иметь свойство Flexbox применительно к моим всплывающим окнам, таким как display: flex, который имеет это браузер варианта:

display: -webkit-flex; 
display: -moz-flex; 
display: -ms-flexbox; 

Когда я пытаюсь изменить CSS для display: none моего браузер переопределяет его с display: -webkit-flex;, поэтому я все еще не скрываю свой элемент. Я думал об использовании visibility, но поскольку jquery использует .show и .hide с дисплеем, а не видимость, он вроде как не тот инструмент.

Должен ли я каким-то образом переопределить jQuery .hide(), чтобы изменить другие свойства отображения, или создать элемент каждый раз, когда я хочу его отобразить, а затем удалить html из него после отправки?

у меня SCSS с этим наложенным содержанием стайлинга:

.overlay-content { 
    /* this may or may not be here */ 
    /* visibility: hidden; */ 

    @include flex(); 
    @include flex-direction(column); 
    @include flex-justify-content(flex-start); 
} 

И я бы кодом, который вызывает, когда я хочу показать мое всплывающее окно:

 $('.overlay-content').css('visibility: visible;'); 
     $('.overlay-bg').css('visibility: visible;'); 

Это хорошо использовать свойство visibility css или всегда использовать свойство display для изменения видимости элемента?

Что меня беспокоит то, что этот способ я не могу использовать прохладный jquery.hide() варианты прохладного пользовательского опыта

Answer 1

Я столкнулся с той же проблемой, и решение, которое я придумал не может быть самой элегантной, но это делает работу.

Я просто вызвал .hide() в коде инициализации компонента. jQuery добавляет inline display: none к элементу, а последующий вызов .toggle() удаляет его, поэтому указанная в таблице стилей display: flex вступает в игру.