Jak zmienić widoczność wyskakującego podręcznego okna w stylu flexbox za pomocą jQuery? - javascript, jquery, html, css, flexbox

Chciałbym mieć wyskakujące okienko na mojej stronie, chciałabym go wyposażyć w flexbox, używam scss do stylizowania rzeczy i mam mixiny dla właściwości flexbox.

Problemem, który napotkałem, jest to, że chcę mieć właściwości flexbox zastosowane do mojego popup, takie jak display: flex który ma jego warianty przeglądarki:

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

Kiedy próbuję zmienić css na display: none moja przeglądarka go zastępuje display: -webkit-flex; więc wciąż nie ukrywam swojego elementu, myślałem o użyciu visibility ale ponieważ używa jquery .show i .hide z wyświetlaczem, a nie z widocznością, wydawało się to niewłaściwym narzędziem.

Czy powinienem jakoś nadpisać jQuery .hide() zmienić również inne właściwości ekranu lub utworzyć element za każdym razem, gdy chcę go wyświetlić, a następnie usunąć jego html po przesłaniu?

Mam swój scss z tym stylem nakładki:

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

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

I mam kod, który uruchamia się, gdy chcę wyświetlić moje popup:

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

Czy używanie właściwości css widoczności jest w porządku, czy też powinienem zawsze używać właściwości wyświetlania, aby zmienić widoczność elementu?

Martwi mnie to, że w ten sposób nie mogę używać cool jquery.hide() opcje zapewniające komfort użytkowania

Odpowiedzi:

Zdaję sobie sprawę, że rozwiązanie, które wymyśliłem, może nie być najbardziej eleganckie, ale spełnia swoją funkcję.

Po prostu zadzwoniłem .hide() w kodzie inicjalizacji komponentu. jQuery dodaje wbudowane display: none do elementu, a następnie do wywołania .toggle() usuwa go, więc jest określony w arkuszu stylów display: flex wchodzi w grę.