在某些地圖元素下出現JQuery彈出窗口

對於JQuery和OpenLayers都很新穎。一切都在順利進行，直到我試圖用JQuery的對話框類打開模態對話框。在某些地圖元素下出現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 
    }); 
});

來源

2012-10-26 GazTheDestroyer

增加你可以添加一個鏈接或代碼這裏彈出 –

的z-index的？最好的盲猜是z-indexes和嵌套元素 – Scrimothy

已經創建了一個小提琴，看問題，謝謝。 – GazTheDestroyer

看起來，如果你添加像position:relative;到地圖它按預期工作。

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

Example

來源

2012-10-26 11:39:17

太棒了，謝謝！你能解釋爲什麼這個工作嗎？是否相對某種方式重置z順序？ – GazTheDestroyer

http://stackoverflow.com/questions/5371306/html-z-index-and-positioning上的答案解釋了一點，基本上z-index只適用於定位元素。 –

更多關於z-index的信息http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ –

這是所有關於z-index你的元素。下面是它的小提琴主要工作（你只需要找到類或ID爲「使用條款」鏈接，並添加下面的第一行）：http://jsfiddle.net/GRVuZ/5/

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

來源

2012-10-26 11:38:52

在某些地圖元素下出現JQuery彈出窗口

回答

相關問題