javascript - 保持 jQueryUI 对话框内容可见，为对话框内容添加新维度

Question

使用 jQueryUI dialog 的代码片段是:

 $(".upload_photos").bind('click', function (e) {
     e.preventDefault();
     var dialog = $(this);
     dialog.dialog({
         width:860,
         height:560,
         autoOpen: false
     });
     dialog.dialog('open');
 });

HTML 标记:

<div class="upload_photos">
    <img src="source" />
</div>

当我单击“upload_photos”div 时，图像会显示在对话框窗口中，但会从背景页面中消失。

1. 如何让它同时在后台页面可见？<​​/p>

2. 当图像出现在对话框上时，我想以不同的尺寸(宽度和高度)显示它。如何做到这一点？

编辑:

多次单击“upload_photos”div 会创建多个对话框。但我不想为以后的点击创建任何对话框。如何做到这一点？

编辑2:

“upload_photos”div 的图像下方有一个按钮。我使用克隆(vardialog = $(this).clone();)。我也在该对话框中找到了该按钮。但是，如果我单击该按钮，标记将在网页中的图像上开始，而不是在对话框的图像上开始。

解决办法是什么？

编辑3:

标记脚本在 jquery 的帮助下对“upload_photos”div 进行选择。当它被克隆到对话框时，脚本仍然在网页中找到选择，而不是在对话框中。这可能与(？)事件处理有关还是什么？我尝试过

var dialog = $(this).clone(true); 

但无法解决。如何将jquery选择的注意力转移到对话框窗口？

编辑4"

如果我使用 vardialog = $(this) 而不是 vardialog = $(this).clone(true); 则标记发生在对话框上框，但图像从网页上消失。

Answer 1

1) 您正在使用页面 div 作为对话框，请尝试以下操作:

var dialog = $(this).clone();

2)对话框上的img固定尺寸:

$("img", dialog).addClass('fixedSize');

img.fixedSize {
    width: 500px;
    height: 500px;
}

3) 阻止背景点击:

dialog.dialog({
    width:860,
    height:560,
    autoOpen: false,
    modal: true
});

<小时/>

阅读对话框文档和选项以获取更多信息和配置:

• JQuery UI Dialog