JQuery popup appearing under some map elements

StackOverflow https://stackoverflow.com/questions/13085628

Pregunta

Pretty new to both JQuery and OpenLayers. Everything was going swimmingly until I've tried to open a modal dialog using JQuery's dialog class.

The dialog works fine except it appears under certain elements of the map:

enter image description here

This is the same in both Opera and Chrome (Not tested others). Can anyone suggest a way to fix this? Thanks.

EDIT: I've created a fiddle here that demos the problem.

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
    });
});​
¿Fue útil?

Solución

it looks like if you add position:relative; to the map it works as expected.

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

Example

Otros consejos

It's all about the z-index for your elements. Here is a fiddle of it mostly working (you just need to find the class or ID for the 'Terms of use' link and add that to the first line below): http://jsfiddle.net/GRVuZ/5/

.gmnoprint, .zolControlZoom, .olControlNoSelect {z-index:900 !important;}
#jpopup {z-index:1000;}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top