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.

1 files changed, 23 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();
   };
 })();