在 jQuery Modal 中调整传单的大小

Question

我遇到了一个由各种问题提出的问题，但我无法通过各种答案中提供的方法解决它。

我的问题是，在包含通过 rails 应用程序生成的传单地图的 jQuery 模态中，瓷砖没有正确呈现。

之前的问题（例如这个Leaflet map not showing properly in bootstrap 3.0 modal）建议在模态显示后通过jQuery函数使用invalidateSize();方法。

我的应用程序与问题的不同之处在于我使用的是jQuery Modal 库。

我目前正在尝试这样的事情

<% @clinics.each_with_index do |clinic, index| %>

<div class="link-to-map">
   <a href="#ex1" rel="modal:open" id="to-modal">
     <span class="glyphicon glyphicon-arrow-right"></span>
   </a>
</div>



<div id="ex1" class="map-modal" style="display:none;">
  <div class="row">
     <div class="col-sm-7">
       <div id="mapid-<%= index %>" class="mapas-modal">                                                 
       </div>
     </div>
   </div>
<% end %>
</div>

<script>
  var mymap = L.map('mapid-<%= index %>').setView([19.419444, -99.145556], 13);

  L.tileLayer('https://api.mapbox.com/styles/v1/eclarkgd/ciwfc2mce004b2plkmujdb3no/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWNsYXJrZ2QiLCJhIjoiY2lraXVvaWlzMDUzN3RubTZ2OHBscWRxciJ9.ikI5wjFM2RNcoOrssqx2Zg', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
  }).addTo(mymap);

  var marker = L.marker([19.419444, -99.145556]).addTo(mymap);
  marker.bindPopup("<%= clinic.institucion %>").openPopup();
</script>

<script>   
  $('#to-modal').click(function() {

    setTimeout(function() {
      mymap.invalidateSize();
      alert("corre corre");
    }, 1000);

  });
</script>

我的图块仍然无法在 div 中正确呈现。我之前在一个使用传统引导模式的应用程序中使用过这种方法，并且它有效

任何想法将不胜感激。

**已编辑添加模态打开链接

Answer 1

您没有显示您的模态打开链接等，因此我们假设您没有拼写错误。

在模态打开链接的"click" 事件上附加一个事件侦听器可能不是更合适的方案。

为什么不简单地使用 jQuery Modal 插件提供的事件？

https://github.com/kylefox/jquery-modal#events

// Invalidate map size when the modal is opened.
$('#ex1').on($.modal.OPEN, function () {
  mymap.invalidateSize();
});

演示：https://jsfiddle.net/3v7hd2vx/285/