I'm working on a web app using Leaflet.js to create a map, Vue.js to manage the app, and Bulma for CSS.
Bulma has a "modal" element, that should appear in front of everything else when its class is set to is-active
. I have this working, except the map does not fade into the background like the rest of the page.
I don't know much about modals. Does anyone have any idea why the map would remain visible while everything else fades? Thanks!!
Without seeing this in action I can only guess. But most likely the modal, the dark overlay behind the modal, and the map all have their css position
set to absolute
or relative
and a number assigned to their css z-index
.
The z-index
of the map is likely higher than that of the modal or the background overlay, causing it to appear in front. The solution, if this is the case is to modify the z-index
values to get them in the right order.