title: Leaflet map not showing properly in bootstrap 3.0 modal
body: <p>i have a big problem. i want to open a leaflet map in a modal.
  but the map is not showing properly. the tiles are not loading.</p>
  
  <p>here is the script:</p>
  
  <p><a href="http://bootply.com/98730" rel="noreferrer">http://bootply.com/98730</a></p>
  
  <pre><code>&lt;a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal"&gt;Open Map&lt;/a&gt;
  
  &lt;div id="myModal" class="modal"&gt;
  &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Map&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;div class="modal-body" id="map-canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn" data-dismiss="modal" aria-hidden="true"&gt;OK&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){
  
   /* map settings */
   var map = new L.Map('map-canvas');
   var cloudmade = new    L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x} /{y}.png', {
   attribution: 'Map data © &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;   contributors, Imagery © &lt;a href="http://cloudmade.com"&gt;CloudMade&lt;/a&gt;',
   maxZoom: 18
   });
   map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);
  
  
   });
  </code></pre>
  
  <p>any help much apreciated</p>