aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--main.js28
-rw-r--r--style.css9
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;
+}