砌体不适用于模态

Question

灵感加载为单列，而不是横跨屏幕。如果我将它从模态中取出，它会起作用，但为什么不在里面？

内部模式

模态外

_表格

<div id="inspirations-margin" class="transitions-enabled">
  <% @inspirations.each do |inspiration| %>
    <div class="box panel panel-default">
      <%= inspiration.name %>
    </div>
  <% end %>
</div>

modals.js.coffee

$ ->
  modal_holder_selector = '#modal-holder'
  modal_selector = '.modal'

  $(document).on 'click', 'a[data-modal]', ->
    location = $(this).attr('href')
    #Load modal dialog from server
    $.get location, (data)->
      $(modal_holder_selector).html(data).
      find(modal_selector).modal()
    false

  $(document).on 'ajax:success',
    'form[data-modal]', (event, data, status, xhr)->
      url = xhr.getResponseHeader('Location')
      if url
        # Redirect to url
        window.location = url
      else
        # Remove old modal backdrop
        $('.modal-backdrop').remove()

        # Replace old modal with new one
        $(modal_holder_selector).html(data).
        find(modal_selector).modal()

      false

inspirations.js.coffee

$ ->
  $('#inspirations-margin').imagesLoaded ->
    $('#inspirations-margin').masonry
      itemSelector: '.box'
      isFitWidth: true

我看到这个人运行变成了 similar problem，但从来没有得到帮助。

Answer 1

问题是您在显示模态之前初始化砌体。你必须在显示模态后调用它。

$(modal_holder_selector).html(data).
find(modal_selector).modal()
$('#inspirations-margin').imagesLoaded ->
    $('#inspirations-margin').masonry
      itemSelector: '.box'
      isFitWidth: true

该代码应该放在显示模态的回调中

Answer 2

对于 Bootstrap 模态：

$('#exampleModal').on( 'shown.bs.modal', function() {
  $('.grid').masonry({
    itemSelector: '.grid-item',
    gutter: 20,
    horizontalOrder: true
  });
})

Codepen

砌体不适用于模态

Masonry not working with Modal

javascript

jquery

ruby-on-rails

ruby

jquery-masonry

内部模式

模态外

_表格

modals.js.coffee

inspirations.js.coffee