JQuery 弹出窗口出现在某些 map 元素下

标签 jquery dialog popup openlayers z-order

对于 JQuery 和 OpenLayers 来说都是相当新的。一切都进展顺利,直到我尝试使用 JQuery 的对话框类打开模式对话框。

该对话框工作正常,只是它出现在 map 的某些元素下:

enter image description here

这在 Opera 和 Chrome 中都是相同的(其他未测试)。谁能建议一种方法来解决这个问题?谢谢。

编辑:我创建了一个 fiddle 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
    });
});​

最佳答案

看起来如果您将 position:relative; 添加到 map 中,它就会按预期工作。

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

Example

关于JQuery 弹出窗口出现在某些 map 元素下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13085628/

相关文章:

javascript - 如何在 WordPress 站点中实现 (Noty) jquery 通知

javascript - 如何使用javascript onclick创建表单元素输入框,标签

javascript - 在不使用选项卡的情况下浏览 jQuery 对话框中的不同内容

android - 如何在对话框中保留开关设置?

java - 如何关闭出现在同一页面上的子弹出窗口

javascript - 在 MVC 中解析 JSON 字典中的键/值对结果

C++ 异常处理程序问题

c# - Web浏览器对话框弹出 block

javascript - Firefox 弹出窗口锁定父窗口直到它关闭

javascript - 复选框组选择的动态限制