Css 使用display:flex作为'；开放式'；状态而非显示：带花式方框2的块

我想使用display:flex作为“打开”状态，而不是display:block和花式方框2

当前元素获取

display:block内联

我正试图找出在哪里更改它，但也许我只需要在弹出窗口中嵌套一个div。以前有人这样做过吗



加成


jQuery
如果fancybox不给您任何更改选项，您有3个选择

直接在源代码中更改它（不是最好的方法）
嵌套另一个div，以便添加的显示不会影响您的显示（如您所述）
在
beforeShow
回调中自己重写它。您需要使用jQuery来获取对当前
的引用。弹出的
和保留引用并在以后使用它：

function handleDisplay($popup) {
    var closure = function() { $popup.css('display', 'flex'); };
    return closure;
}

$('.thing-that-triggers').each(function() {
    var displayHandler = handleDisplay($(this).children('.pop-up'));
    $(this).fancybox({
        beforeShow: displayHandler
    }
});

有关其他可用回调，请参阅

只需添加一个内部div并在其上设置flex内容，然后将外部div留给fancybox

这是一个答案，但我更愿意不改变我的标记+我认为这个问题在不久的将来会被问很多。因此，我认为JS解决方案是最好的答案



加成
您可以添加display:flex！重要的是要覆盖默认属性。不是真的，因为它必须首先隐藏。大多数内联样式来自花式方框js。因此，您可以只搜索display或block来查看其设置样式属性的位置。这是我的第一种方法，但jquery.fancybox.js中实际上没有“block”。这个问题完美地说明了为什么将视图与控制逻辑分离很重要，以及为什么内联样式会引起麻烦。fancybox的开发人员应该创建一个
fancybox.css
文件，并根据事件简单地从该文件中应用和删除css类。这非常接近Simon。我喜欢你的匆忙！$（“…”）可能需要是一个“this”类型的东西，否则-它也会显示所有其他弹出窗口。我很惊讶没有设置。也许我必须实现一个。仍然获得所有的弹出窗口，但我扩展了范围以保存状态，以防您提出神奇的解决方案。：）@sheriffderek是一个独特的类吗？你的意思是说当你打开其他弹出窗口时，flex弹出窗口总是打开的吗？有一个类似“缩略图”的列表。。。他们每个人都有自己的“弹出窗口”，所以-可能有1个，或者345个。取决于服务器返回的内容。这就是为什么你的角度一次只需要影响点击的一个。@sheriffderek找到了一种方法，检查编辑，看看它现在是否有效：）
.pop-up
    display: flex // setup
    flex-direction: column
    display: none // hide it for fancybox
    .text
        width: 100%
    .image
        display: none // hide on small screen
    @media $break-point-2
        flex-direction: row
        align-items: center
        .block
            split-in(2)
        .text
            flex-center-child()
            .recipe
                // centered
        .image
            display: block // show second panel

$('.thing-that-triggers').fancybox({...});

function handleDisplay($popup) {
    var closure = function() { $popup.css('display', 'flex'); };
    return closure;
}

$('.thing-that-triggers').each(function() {
    var displayHandler = handleDisplay($(this).children('.pop-up'));
    $(this).fancybox({
        beforeShow: displayHandler
    }
});

<div class='thing-that-triggers'>

  <span>thing</span>

  <div class='pop-up'>
    <div class='inner'>
      <div class='text'>
        text
      </div>
      <div class='image'>
        image
      </div>
    </div>
  </div>

</div>

.pop-up
    display: none
    .inner
        display: flex // setup
        flex-direction: column
    .text
        width: 100%
    .image
        display: none // hide on small screen
    @media $break-point-2
        .inner
            flex-direction: row
            align-items: center
        .block
            split-in(2)
        .text
            flex-center-child()
            .recipe
                // centered
        .image
            display: block // show second panel