調整jQuery中的傳單尺寸Modal

我遇到了各種問題已經提出的問題，但我無法通過各種答案中提供的方法解決問題。調整jQuery中的傳單尺寸Modal

我的問題是，在包含通過rails應用程序生成的Leaflet地圖的jQuery模型中，tile不能正確呈現。

以前的問題（如Leaflet map not showing properly in bootstrap 3.0 modal）建議使用invalidateSize（）;顯示模態後，通過jQuery函數執行方法。

我的應用程序不同於我使用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>

不過我的瓷磚不專區內正確地渲染。我以前在使用傳統引導程序模式的應用程序中使用過此方法，並且它可以工作

任何想法都將不勝感激。

**編輯補充的模式打開連桿

來源

2017-05-10 eclark

您未能顯示模式的開放鏈接等，所以我們還是要假設你沒有錯別字。

在模態打開鏈接的"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/

來源

2017-05-11 05:09:15 ghybs

你好，謝謝你的評論，現在還沒有corrently渲染，仍然看起來好像尺寸不被無效。我已添加模式的開放鏈接。謝謝您的幫助！ – eclark

實際上，現在我已經檢查瞭解決方案，但部分工作。 Rails應用程序生成8個模塊，每個模塊都有一個映射，因爲某些原因，mapinvalidate方只適用於最後一個。 – eclark

很難說沒有看到您的新代碼可能會出現什麼問題。可能是封閉或參考問題。 – ghybs

調整jQuery中的傳單尺寸Modal

回答

相關問題