画像を表示するには、ボタンをクリックすると画像が表示されます。背景を無効にしないでください。

Question

ここでは、Openlayers 3でWMSレイヤの伝説を呼び出そうとしています。移動可能なクローズボタンを持つポップアップボックス。

この.htmlのページ：

<label><input type="checkbox" id="landuse" />LANDUSE</label> 
<div id="map" class="map"> 
      <div class="udiv_legende" id="legende_1"> 
     <img id='legid'> 
      </div> 
    <div id="popup"></div> 
    </div> 

このJavaScript

//this the layer 
    var landuseLayer = new ol.layer.Image({ 
      coordinates: [79.14511833527447, 20.987418098133496, 79.2018842619151, 21.050233196545], 
       source: new ol.source.ImageWMS({ 
        url: 'http://localhost:8080/geoserver/sagy/wms', 
        params: {'LAYERS': 'sagy:pachgaon_LULC_Project', transparent: true, minScale: 8}, 


       }), 
       visible: false 
       }); 
     var view = new ol.View({ 
      Projection: 'EPSG:4326', 
      center: ol.proj.fromLonLat([79.17436, 21.01668]), 
         zoom: 4 
      }); 

     var map = new ol.Map({ 
      layers: [ 
      new ol.layer.Tile({ 
       preload: 4, 
        source: new ol.source.OSM() 
        }) 
      ], 
      target: 'map', 
      view: view 
     }); 
     $('input[type=checkbox]').on('change', function() { 
     var lyrname; 
      var layer = { 

      landuse: landuseLayer, 
     }[$(this).attr('id')]; 

     lyrname = $(this).attr('id'); 
      alert($(this).attr('id')); 
     if(lyrname== 'landuse'){ 
     alert('luse'); 
     document.getElementById("legid").src="http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sagy:pachgaon_LULC_Project"; 
//like here i'm calling those legends but i want in a popup box of this url data 
     } 

にあなたが条件が、私は画像のURLを呼んでいるが、私はそれを望ん「もし」の中に見ることができるようにポップアップボックス。オンボタンをチェックすると、ポップアップ形式で画像ソースデータを取得する方法を教えてください。

Answer 1

は次のようにjQueryのダイアログ機能を試してみてください：

$(function() { 
      $("#yourDialogId").dialog({ 
       autoOpen: false, 
       show: { 
        effect: "clip", 
        duration: 600 
       }, 
       hide: { 
        effect: "clip", 
        duration: 600 
       }, 
       buttons: { 
        Ok: function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 

      $("#opener").click(function() { 
       $("#dialog").dialog("open"); 
      }); 
     });