Show geocoding result in a modal.

assets/main.js

@@ -39,21 +39,22 @@ $( document ).ready(function() {
                 );
             });
 
-            $('#search-results').empty();
+            $('#modal .modal-body').empty();
             if (items.length != 0) {
-                // $('<p>Resultats</p>').appendTo('#search-results');
-                $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#search-results');
+                $('<ul/>').addClass("list-group").html(items.join('')).appendTo('#modal .modal-body');
             } else {
-                $('<p>', { html: "Aucun résultat" }).appendTo('#search-results');
+                $('<p/>', { html: "Aucun résultat" }).appendTo('#modal .modal-body');
             }
+            $('#modal').modal('show');
 
             // Bind click on results and update coordinates
-            $('#search-results a').on('click', function(e){
+            $('#modal .modal-body a').on('click', function(e){
                 e.preventDefault();
 
                 marker.setLatLng({lat:$(this).data('lat'), lng:$(this).data('lng')}).update();
                 map.panTo({lat:$(this).data('lat'), lng:$(this).data('lng')});
                 ondragend();
+                $('#modal').modal('hide');
             });
 
         }); // getJSON

index.html

@@ -182,5 +182,19 @@ Un moyen de contact au moins est nécessaire
   <footer>
     <p>Vos données personnelles sont en lieu sûr.</p>
   </footer>
+
+<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
+        <h4 class="modal-title" id="myModalLabel">Résultats</h4>
+      </div>
+      <div class="modal-body">
+      </div>
+    </div>
+  </div>
+</div>
+
 </body>
 </html>