如何使用jQuery切换flexbox风格弹出窗口的可见性

How to toggle visibility of flexbox styled popup with jQuery?

本文关键字：窗口 可见性 风格 何使用 jQuery 切换 flexbox      更新时间：2023-09-26

所以我想在我的页面上有一个弹出窗口。我想用flexbox做造型。我正在使用scss样式的东西，我有mixins 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 ?

我有我的css与这个覆盖内容样式:

.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()选项来获得很酷的用户体验

我遇到过同样的问题，我提出的解决方案可能不是最优雅的，但它能解决问题。

我只是在组件的初始化代码中调用.hide()。jQuery将内联display: none添加到元素中，随后对.toggle()的调用将其删除，因此在样式表中指定的display: flex开始发挥作用。

相关文章：