javascript - JQuery UI 对话框未正确显示在传单顶部

Question

我想在页面加载时在 Leaflet map 顶部显示一个 JQuery UI 对话框。

加载页面时，对话框已初始化，但如果 map 100% 占 html 页面，该对话框很快就会隐藏在传单 map 后面。

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/

这是 Leaflet 或 JQuery 的错误还是我做错了什么？

进一步的问题:最适合 Leaflet 的 JS 和 UI 框架是什么？

Answer 1

您可以通过在 ui.dialog 类上使用 css 定义 z-index 来实现它:

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

你应该检查这个帖子:jQuery UI 1.10: dialog and zIndex option