diff options
-rw-r--r-- | main.js | 28 | ||||
-rw-r--r-- | style.css | 9 |
2 files changed, 32 insertions, 5 deletions
@@ -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(); }; })(); @@ -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; +} |