Search code examples
javascriptvue.jsmodal-dialogleafletbulma

Leaflet map remains present when modal is active. Why?


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!!

My web app with a Bulma modal activated. The Leaflet map refuses to fade into the background.


Solution

  • 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.