Javascript 在传单地图弹出窗口中启动Jquery UI对话框时出现问题

在我的传单地图，我想有一个弹出绑定到一个有缩略图图像层

当用户单击缩略图时，将显示一个带有该图像更大版本的lightbox

我已经选择使用jQueryUI中的对话框来实现这一点

///我正在使用由SO用户Asad提供的传单JS Fiddle模板：
/// http://stackoverflow.com/a/13699060/3679978
///我想我理解他解释的动态生成Javascript的概念。
//加载地图内容。
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'{
归因：“来自&mdash；&mdash；撰稿人的图像，”，
maxZoom:18，
}).addTo（地图）；
var marker=L.marker（[51.5，-0.09]）addTo（map）；
//创建一个元素以保存所有文本和标记
变量容器=$（''）；
//创建变量以保存缩略图的html字符串
//最初基于此：http://stackoverflow.com/a/4452494/3679978
var tempimg=“”；
//将容器本身及其内容的所有事件处理委托给容器
container.on（'click'，'按钮#pdf'，函数（）{
警报（“测试”）；
});
//同上，但第20行的myImage类
container.on（'click'，'.myImage'，function（）{
$（'div.myImage'）.dialog（）；
});
//使用您喜欢的方法，将您想要的任何内容插入容器中
html（“这是一个链接：。”+tempimg）；
//container.append（$（''）.text（''：'））
//将容器插入弹出窗口
marker.bindpoop（容器[0]）；

我认为问题很清楚：

打开Jquery UI对话框时，其行为异常

对话框关闭时，缩略图将消失

Javascript、JQuery和传单仍然是新的。请告知

注意：如果有一个更好的解决方案，我的形象在弹出的问题，我愿意听到它

谢谢

找到了答案：

编辑：以下是JSFIDLE：

//在jQuery中创建div元素
变量容器=$（''）；
//创建一个包含html字符串的变量，该字符串位于容器上方
//注意，我制作了同样的图像，将放大成更小的120x90缩略图
var tempimg='点击放大'；
//单击容器中的.myImage类（即缩略图）后，打开一个jQueryUI对话框。。。
container.on（'click'，'.myImage'，function（）{$（'#dialog'）。dialog(
//…当它打开的时候。。。
{open:function（）{
///…分配一个可以访问div id“image”的变量。。。
imageTag=$（“#图像”）；
///…并在#image中设置图像src（请注意，这次它将是全尺寸的）。。。
attr（“src”http://www.w3schools.com/images/pulpit.jpg");
}，closeOnEscape:true，modal:true}）；
});
html（tempimg）；

加载Jquery ui Css时出现问题…我做了一些修改，看一看..谢谢Rahul。我完全忘记了。但是，您为1.10.4添加了css，这可能不是最好的。请参阅下面我编辑的文章，了解解决这两个问题的JSFIDLE，它使用jQueryUI1.10.3（edge 2.X）非常适合您。。。。

/// 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]);

//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);