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时，图像显示在对话框窗口中，但从背景页面消失。

如何让它同时在后台页面中显示？
当图像出现在对话框上时，我想以不同的尺寸（宽度和高度）显示它。怎么做？

修改

多次单击“upload_photos”div会创建多个对话框。但我想不为后来的点击创建任何对话框。怎么做？

EDIT2：

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

解决方案是什么？

EDIT3：

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

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

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

EDIT4"

如果我使用var dialog = $(this)代替var dialog = $(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

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

1 个答案: