Question

对JQuery和OpenLayers都很陌生。在我尝试使用JQuery的对话框类打开模态对话框之前，一切都在顺利进行。

该对话框工作正常，但它出现在地图的某些元素下：

enter image description here

Opera和Chrome都是一样的（未经过其他测试）。任何人都可以建议一种解决方法吗？感谢。

编辑：我创建了一个演绎问题的小提琴here。

HTML：

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

    <div id="popup" title="Test">
        <p>Blah blah</p>
    </div>
</body>

使用Javascript：

var map;

$(function () {

    //init map
    map = new OpenLayers.Map('map', {});
    var wms = new OpenLayers.Layer.Google('Google Map Layer', { type: google.maps.MapTypeId.HYBRID });

    map.addLayer(wms);

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }

    //init popup
    $("#popup").dialog({
        height: 400,
        width: 300,
        modal: true
    });
});

Answer 1

如果您向地图添加position:relative;，它就会按预期工作。

#map { position:relative; width:200px; height:200px; }

Example

Answer 2

所有关于你的元素的z-index。这是一个大部分工作的小提琴（你只需要找到'使用条款'链接的类或ID，并将其添加到下面的第一行）：http://jsfiddle.net/GRVuZ/5/

.gmnoprint, .zolControlZoom, .olControlNoSelect {z-index:900 !important;}
#jpopup {z-index:1000;}

JQuery弹出窗口出现在一些地图元素下

2 个答案: