Fix modal backdrop and pointer events.

Clicks on buttons or modal shouldn't propagate to the map.  Also
info-modal did not work in fullscreen mode.

2 files changed, 32 insertions, 5 deletions

diff --git a/main.js b/main.js
index a5883de..52e9ecc 100644
--- a/main.js
+++ b/main.js
@@ -132,7 +132,15 @@ const map = new Map({
 
 /* move the control container to the viewport */
 const container = document.getElementById('map-control-container');
-map.getViewport().appendChild(container);
+(function() {
+  const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];
+  container0.appendChild(container);
+  container0.appendChild(document.getElementById('modal-info'));
+
+  const backdrop = document.createElement('div');
+  container0.appendChild(backdrop);
+  backdrop.id = 'modal-info-backdrop';
+})();
 
 /* zoom in/out */
 (function() {
@@ -323,20 +331,30 @@ const menu = document.getElementById('map-menu');
   i.classList.add('bi', 'bi-info-lg');
 
   const panel = document.getElementById('modal-info');
-  const modal = new Modal(panel, {});
+  const modal = new Modal(panel, {
+    backdrop: false,
+  });
+
+  const backdrop = document.getElementById('modal-info-backdrop');
+  backdrop.onclick = function(event) {
+    modal.hide();
+  };
+
   panel.addEventListener('show.bs.modal', function() {
+    backdrop.classList.add('modal-backdrop', 'show');
     btn.setAttribute('aria-expanded', 'true');
     btn.classList.add('btn-dark');
     btn.classList.remove('btn-light');
   });
   panel.addEventListener('hidden.bs.modal', function() {
-    btn.setAttribute('aria-expanded', 'false');
     btn.classList.add('btn-light');
     btn.classList.remove('btn-dark');
+    btn.setAttribute('aria-expanded', 'false');
+    backdrop.classList.remove('modal-backdrop', 'show');
   });
 
-  btn.onclick = function() {
-    modal.toggle()
+  btn.onclick = function(event) {
+    modal.toggle();
   };
 })();
 
diff --git a/style.css b/style.css
index eab6125..07e1dcf 100644
--- a/style.css
+++ b/style.css
@@ -48,6 +48,7 @@ html, body {
   width: revert;
   top: auto;
   left: auto;
+  pointer-events: auto;
 }
 #zoom-control .ol-zoomslider {
   margin-top: .5rem;
@@ -75,6 +76,7 @@ html, body {
   border-radius: 5px;
   border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
   cursor: pointer;
+  pointer-events: auto;
 }
 #zoom-control button.ol-zoomslider-thumb {
   z-index: 10;
@@ -82,6 +84,7 @@ html, body {
   width: 80%;
   margin: 0 auto;
   padding: 0;
+  pointer-events: auto;
 }
 
 .ol-scale-line {
@@ -98,6 +101,7 @@ html, body {
   background-clip: padding-box;
   border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
   border-radius: var(--bs-modal-border-radius);
+  pointer-events: auto;
 }
 .ol-scale-line-inner {
   border: 1px solid var(--bs-body-color);
@@ -117,6 +121,7 @@ html, body {
 }
 #map-menu > * {
   margin-top: .5rem;
+  pointer-events: auto;
 }
 @media screen and (max-width: 576px) {
   #map-menu > * {
@@ -228,3 +233,7 @@ html, body {
     --bs-btn-padding-y: 0.4rem;
   }
 }
+
+.ol-overlaycontainer-stopevent .modal-backdrop.show {
+  pointer-events: auto;
+}