Einstellen Größe des Blättchens in jQuery Modal

Question

ich ein Problem habe, die von verschiedenen Fragen gebeten worden, aber ich habe nicht in der Lage gewesen, es durch das Verfahren zu lösen, die in verschiedenen Antworten zur Verfügung gestellt worden ist.

Mein Problem ist, dass Fliesen sind nicht richtig in einem jQuery Modal-Rendering, die eine Broschüre Karte durch eine Rails-Anwendung erzeugt enthalten. Die vorherigen Fragen (wie diese Leaflet map not showing properly in bootstrap 3.0 modal) haben vorgeschlagen, invalidateSize(); Methode durch eine jQuery-Funktion nach dem Modal angezeigt wird.

Meine Anwendung unterscheidet sich auf die Frage, dass ich mit der jQuery Modal Bibliothek.

Ich bin derzeit mit so etwas wie diese

<% @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> 

noch meine Fliesen sind nicht richtig in der div versuchen zu machen. Ich habe diese Methode bereits in einer Anwendung verwendet, die die traditionelle Bootstrap-modal verwendet und es funktionierte

Irgendwelche Ideen wäre sehr dankbar.

** redigierte die modal Öffnung Link

Answer 1

Sie hinzufügen möchten nicht Ihre modal Öffnungsverbindung zeigt, etc., so dass wir links Sie nicht davon ausgehen, Rechtschreibfehler.

einen Ereignis-Listener auf dem "click" Ereignis Ihrer modalen Öffnungsverbindung möglicherweise nicht die angemessenere Regelung sein Anbringen.

Warum nicht einfach mit den von Ihrer jQuery Modal-Plugin zur Verfügung gestellt Ereignisse?

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

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

Demo: https://jsfiddle.net/3v7hd2vx/285/