JQuery popup appearing under some map elements
-
14-07-2021 - |
Question
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:
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
});
});
La solution
it looks like if you add position:relative;
to the map it works as expected.
#map { position:relative; width:200px; height:200px; }
Autres conseils
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;}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow