Question

我有一个小问题，希望有人可以伸出援助之手。我正在使用Zurbs Reveal Modal，而不是使用数据属性data-reveal-id="myModal"我出于一个或多个原因选择仅使用id="myModal"。

因此，在通过点击或哈希窗口触发器触发模态后尝试重新初始化均衡器时遇到了一些问题。

我的HTML看起来像：

<a class="about" href="#about"></a>

<div id="about" class="reveal-modal" data-reveal>
    <div class="row" data-equalizer>
        <div class="large-6 columns" data-equalizer-watch> </div>
        <div class="large-6 columns" data-equalizer-watch> </div>
    </div>
<a href="#" class="close"></a>
</div>

我的JavaScript看起来像：

(function($){    
    $(document).foundation({reveal:animation_speed:400,root_element:".bContent"}});
    $("a.about").on("click",function()$("#about").foundation("reveal","open")});
    $("a.close").on("click",function()$("#about").foundation("reveal","close")});
    $(document).ready(function(){var a=$(window.location.hash);a.length>0&&a.hasClass("reveal-modal")&&a.foundation("reveal","open")});
})(jQuery);

我需要什么...

点击和窗口位置上的触发器完美地工作，我想要它在点击之后或在window.location.hash期间重新初始化均衡器，我不是最好的人在使用JavaScript但没有我已经尽力而为，我试过的一些失败的尝试可以在下面看到：

$('.reveal-modal').hasClass('open')foundation.libs.equalizer.reflow()

$(document).on('opened.fndtn.reveal', '#about', function () {
    Foundation.libs.equalizer.reflow();
});

并且对于窗口位置哈希这一个：

$(document).ready(function(){var a=$(window.location.hash);a.length>0&&a.hasClass("reveal-modal")&&a.foundation("reflow")});

我哪里出错了！提前谢谢！

Answer 1

你应该设置指定Equalizer是否应该在元素堆叠后使元素等于高度。

$(document).foundation({
    equalizer : {
        equalize_on_stack: true
    }
)}

然后在揭示开场时应用回流：

$(document).on('opened.fndtn.reveal', '#about', function () {
    Foundation.libs.equalizer.reflow();
});

使用单击和窗口哈希重新初始化显示模态中的Zurb均衡器

1 个答案: