Question

所以我想在我的页面上弹出一个弹出窗口。我想用flexbox设计它。我使用scss来设计样式，并且我有用于flexbox属性的mixins。

我遇到的问题是我希望将弹性变量框属性应用于我的弹出窗口，例如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为元素添加了内联display: none，后续调用.toggle()将其删除，因此样式表display: flex中指定的内容将起作用。

如何使用jQuery切换flexbox样式弹出窗口的可见性？

1 个答案: