我有一个部分被渲染多次,每个部分有一个基础模态。在这个模态中,我想使用光滑的滑块。由于在加载光滑时未显示元素,因此不显示图像。如果我调整窗口大小,则会显示图片。
互联网上存在许多这样的问题(主要是标签),但没有修复对我有帮助。
我的代码看起来像这样:
<% @names.each do |n| %>
<div class="name-card" id="name-<%= n.id %>">
<%= render partial: 'name_card', locals: {n: n} %>
</div>
<div id="name-modal-<%= n.id %>" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<%= render partial: 'name_modal', locals: {n: n} %>
</div>
<% end %>
_name_card.html.erb
<p> n.name </p>
<p> n.surname </p>
<a href="#" data-reveal-id="name-modal-<%= n.id %>"> OPEN </a>
_name_modal.html.erb
<div id="name-modal-image-<%=n.id%>">
<%= image_tag "selfie.jpg" %>
<%= image_tag "portrait.jpg" %>
</div>
<script>
$("div[id^=name-modal-image-]").not('.slick-initialized').slick();
</script>
我尝试了各种建议:
var selector = $("div[id^=box-modal-image-]");
selector[0].slick.setPosition(); //option1
$('.reveal-modal').on('opened', function() {
$(selector).slick("setPosition", 0);
}); //option2
$(window).trigger(‘resize’); //option3
window.dispatchEvent(new Event(‘resize’)); //option4
但它们都没有奏效。有没有人有任何其他建议如何克服这个问题?谢谢!
基金会网站使用事件open.zf.reveal
进行展示。
https://foundation.zurb.com/sites/docs/reveal.html#javascript-reference