jQuery 모달의 전단지 크기 조절

Question

다양한 질문에 의해 질문을 받았지만 여러 가지 대답으로 제공된 방법으로 해결하지 못했습니다.

내 문제는 레일 애플리케이션을 통해 생성 된 리플릿 맵을 포함하는 jQuery 모달에서 타일이 올바르게 렌더링되지 않는다는 것입니다.

이전 질문 (예 : 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> 

처럼 뭔가 노력하고있어. 나는 이전에 전통적인 부트 스트랩 모달을 사용하는 응용 프로그램에서이 방법을 사용했으며

모든 아이디어를 높이 평가할 것입니다.

** 모달 개방 링크

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/