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

Share Improve this question Follow edited Oct 9, 2017 at 12:12 duenni asked Oct 9, 2017 at 12:04 duenniduenni 31811 gold badge44 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Apply this CSS rules to map and model:

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