传单顶部未正确显示 JQuery UI 对话框 [重复]答案

【问题标题】：JQuery UI Dialog not properly shown on top of Leaflet [duplicate]传单顶部未正确显示 JQuery UI 对话框 [重复]
【发布时间】：2018-07-29 04:31:28
【问题描述】：

我想在页面加载时在 Leaflet 地图上显示一个 JQuery UI 对话框。

加载页面时，对话框已初始化，但如果地图是 html 页面的 100%，则该对话框很快隐藏在传单地图后面。

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 的错误还是我做错了什么？

再问：什么 JS 和 UI 框架最适合 Leaflet？

【问题讨论】：

标签： javascript jquery jquery-ui leaflet

【解决方案1】：

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

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

您应该查看此 SO 帖子：jQuery UI 1.10: dialog and zIndex option

【讨论】：

【解决方案2】：

您可以在#map 中设置z-index，而不是在modal 中设置z-index，如下所示：

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

你也可以使用这个：http://leafletjs.com/

【讨论】：