I'm using leaflet and modalcss to display a modal within a map. This worked like a charm with leaflet v0.7.7. See this Plunker: click --> Click the button under the zoom controls.

When I switch to leaflet v1.2.0 the modal gets opened but behind the map. See this Plunker: click

Why is this happening? Any idea on how to show the modal in front of the map like in the old version of leaflet? Thanks!

I'm using leaflet and modalcss to display a modal within a map. This worked like a charm with leaflet v0.7.7. See this Plunker: click --> Click the button under the zoom controls.

When I switch to leaflet v1.2.0 the modal gets opened but behind the map. See this Plunker: click

Why is this happening? Any idea on how to show the modal in front of the map like in the old version of leaflet? Thanks!

• javascript
• jquery
• css
• modal-dialog
• leaflet

1 Answer 1

Apply this CSS rules to map and model:

#map{ z-index:1; }
#modal{ z-index:2; }