javascript - 单击按钮时将图像 url 数据显示到弹出框中，而不禁用背景

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 
         }

正如您在“if”条件中看到的，我正在调用图像 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");
            });
        });