2

JQueryとOpenLayersの両方にとってかなり新しい。JQueryのダイアログクラスを使用してモーダルダイアログを開こうとするまで、すべてが順調に進んでいました。

ダイアログは、マップの特定の要素の下に表示されることを除いて、正常に機能します。

ここに画像の説明を入力してください

これはOperaとChromeの両方で同じです（他ではテストされていません）。誰かがこれを修正する方法を提案できますか？ありがとう。

編集：問題をデモするフィドルをここに作成しました。

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
    });
});​
4

2 に答える 2

7

position:relative;マップに追加すると、期待どおりに機能するように見えます。

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

例

于 2012-10-26T11:39:17.393 に答える
1

z-indexそれはあなたの要素のためのすべてです。これはほとんど機能するフィドルです（「利用規約」リンクのクラスまたはIDを見つけて、それを下の最初の行に追加するだけです）：http://jsfiddle.net/GRVuZ/5/

.gmnoprint, .zolControlZoom, .olControlNoSelect {z-index:900 !important;}
#jpopup {z-index:1000;}
于 2012-10-26T11:38:52.750 に答える