aggiunta modale per info

index.html

@@ -8,6 +8,7 @@
     />
     <title>Mappa Punti Solidali Milano</title>
     <link rel="stylesheet" href="style-ps.css" />
+    <link rel="stylesheet" href="bootstrap.min.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap"
       rel="stylesheet"
@@ -55,6 +56,27 @@
       allowfullscreen
       src="//umap.openstreetmap.fr/en/map/mappapuntisolidali_440667?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false"
     ></iframe>
+    <div id="info">
+      <a href="javascript:;"><img class="js-static-modal-toggle" src="https://img.icons8.com/material-two-tone/48/000000/info--v1.png"/> </a>
+    </div>
+    <!-- Modale -->
+    <div id="static-modal" class="modal" tabindex="-1" role="dialog">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
+            <h4 class="modal-title">Inforrmazioni e segnalazioni</h4>
+          </div>
+          <div class="modal-body">
+            <p>Per segnalazioni scrivere a: mappapuntisolidali@inventati.org</p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          </div>
+        </div><!-- /.modal-content -->
+      </div><!-- /.modal-dialog -->
+    </div><!-- /.modal -->
+     <!-- Modale FIne -->
     <div id="footer" style="z-index:50;">
       <ul id="legenda">
         <li>
@@ -99,5 +121,12 @@
         </li>
       </ul>
     </div>
+    <script src="lib/modal.min.js"></script>
+    <script>        
+    document.querySelector('.js-static-modal-toggle').addEventListener('click', function() {
+    console.log('puupameLO DAVVERO');
+    new Modal({el: document.getElementById('static-modal')}).show();
+    });
+  </script>
   </body>
 </html>

style-ps.css

@@ -48,3 +48,52 @@ ul > li {
     padding-right: 5px;
     text-align: center;
 }
+
+#info {
+  z-index: 60;
+  position: absolute;
+  right: 0px;
+}
+
+
+/**************************\
+  Basic Modal Styles
+\**************************/
+.modal-backdrop {
+  opacity: 0.5;
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInDown .modal-dialog {
+  animation-duration: .75s;
+  animation-fill-mode: both;
+  animation-name: slideInDown;
+}
+
+
+@keyframes slideOutUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.slideOutUp .modal-dialog {
+  animation-duration: .75s;
+  animation-fill-mode: both;
+  animation-name: slideOutUp;
+}