在Leaflet Maps Popup中启动Jquery UI对话框的问题

在我的Leaflet Map中,我想将一个弹出窗口绑定到一个包含缩略图图像的图层。

当用户点击缩略图时,会出现一个灯箱,其中包含该图像的较大版本。

我选择使用Jquery UI中的对话框来执行此操作。

到目前为止我所拥有的JS小提琴

/// I am using a leaflet JS Fiddle Template was provided by SO User Asad here: /// http://stackoverflow.com/a/13699060/3679978 /// I THINK I understand the concept he explained about dynamically generating Javascript. // Load Map stuff. var map = L.map('map_canvas').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-light/{z}/{x}/{y}.png', { attribution: 'Imagery from MapBox — © OpenStreetMap contributors, CC-BY-SA', maxZoom: 18, }).addTo(map); var marker = L.marker([51.5, -0.09]).addTo(map); // Create an element to hold all your text and markup var container = $('
'); // Create var to hold html string for thumbnail // Originally Based off this: http://stackoverflow.com/a/4452494/3679978 var tempimg = '
myimage
'; // Delegate all event handling for the container itself and its contents to the container container.on('click', '#button_pdf', function() { alert("test"); }); // same as above but for class myImage on line 20 container.on('click', '.myImage', function() { $('div.myImage').dialog(); }); // Insert whatever you want into the container, using whichever approach you prefer container.html("This is a link: ."+ tempimg); // container.append($('').text(" :)")) // Insert the container into the popup marker.bindPopup(container[0]);

我认为问题很明确:

  1. 打开时,Jquery UI对话框表现得很糟糕
  2. 关闭对话框时,缩略图消失。

Javascript,JQuery和Leaflet还是新手。 请指教。

注意:如果在弹出问题中我的图像有更好的解决方案,我会听到它。

谢谢!

弄清楚了:

编辑:这是JSFiddle: http : //jsfiddle.net/8Lnt4/52/

 //Creates the div element in jQuery var container = $('
'); // Creates a variable holding html string to go in above container // Note I made the same image thats going to be enlarged into a smaller 120x90 thumbnail var tempimg = '
myimage
Click to enlarge'; // Upon clicking the .myImage Class in the container (which is the thumbnail) Open a jQueryUI Dialog... container.on('click', '.myImage', function() { $('#dialog').dialog( //...which upon when it's opened... {open: function(){ ///... assign a variable that can acess the div id 'image'... imageTag = $('#image'); ///... and set the image src in #image (note that it'll be the fullsize this time)... imageTag.attr("src","http://sofzh.miximages.com/javascript/pulpit.jpg"); },closeOnEscape: true, modal:true}); }); container.html(tempimg);