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

Question

在我的传单地图中，我希望将一个弹出窗口绑定到具有缩略图的图层。

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

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

JS Fiddle of What I have so far

/// 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 <a href="http://mapbox.com/about/maps/">MapBox</a> &mdash; &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    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 = $('<div />');

// Create var to hold html string for thumbnail
// Originally Based off this: http://stackoverflow.com/a/4452494/3679978
var tempimg = '<a class="preview" href="#" /><div class="myImage"><img src="http://www.w3schools.com/images/pulpit.jpg" alt="myimage" width="120" height="90"/></div>';

// 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: <input id='button_pdf' type='button' value='Click to test' />."+ tempimg);
// container.append($('<span class="bold">').text(" :)"))

// Insert the container into the popup
marker.bindPopup(container[0]);

我认为问题很明确：

1. Jquery UI 对话框打开时的行为很奇怪
2. 对话框关闭时缩略图消失。

仍然是 Javascript、JQuery 和 Leaflet 的新手。请指教。

注意：如果我的图像弹出问题有更好的解决方案，我愿意倾听。

谢谢！

Answer 1

想通了：

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

//Creates the div element in jQuery
var container = $('<div/>'); 


// 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 = '<div id="dialog" style="display: none;"><img id="image" src=""/></div><div class="myImage"><img src="http://www.w3schools.com/images/pulpit.jpg" alt="myimage" width="120" height="90"/></div> 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://www.w3schools.com/images/pulpit.jpg");
},closeOnEscape: true, modal:true});
 });

container.html(tempimg);