JQuery UI Dialog not properly shown on top of Leaflet

Question

I want to show a JQuery UI dialog on top of a Leaflet map on page load.

When the page was loaded, the dialog was initialized but very shortly hidden behind the leaflet map if the map is 100% of the html page.

HTML:

<div id="dialog" title="Basic dialog">
  <p>JQuery UI Dialog</p>
</div>

<div id="map"></div>

JS:

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {
                maxZoom: 18,
                attribution: osmAttrib
            });

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

$( function() {
   $( "#dialog" ).dialog();
} );

CSS:

#map {
    height: 200px;
    width: 500px;
}

http://jsfiddle.net/5ob23600/

Is this a bug with Leaflet or JQuery or something I did wrong?

Further question: what is the JS and UI framework that works best with Leaflet?

Answer 1

You can achieve it by defining the z-index using css on the class ui.dialog:

.ui-dialog { z-index: 1000 !important ;}

you should check this SO post: jQuery UI 1.10: dialog and zIndex option

Answer 2

Rather than set z-index in modal you can set z-index in #map like following:

#map {
    height: 200px;
    width: 500px;
    z-index: 1;
}

Also you can use this: http://leafletjs.com/