jquery对话框定位答案

【问题标题】：jquery dialog positioningjquery对话框定位
【发布时间】：2011-12-24 05:41:31
【问题描述】：

有人会向我解释为什么我的对话只在部分时间集中吗？有时对话框第一次加载图像时它在右侧，但如果你第二次单击它，它就会居中。有时图像会居中，我刷新页面时它会偏离中心？？？

我有以下标记...

<div class="details">
<img id="photo1" class="photos opacity" src="images/photos/angledBuilding_sm.jpg" alt="photography" />
</div>

以及下面的 .js...

$('.photos').click( function() {
var id = this.id;
var src = this.src;
var lrg = "_lg";
var sm = "_sm"
var title = 'This title';//create a separate function to set the title of the image.
var srcNew = src.replace(sm, lrg);
var $dialogImg = '<div><img src=' + srcNew + ' /></div>'
var $dialog = $($dialogImg)

.html($dialogImg)
.dialog({
autoOpen: true,
modal: true,
title: ' ' + title + ' ',
width: 'auto',
height: 'auto',
resizable: false,
draggable: false,
});

$dialog.dialog('open');
$(id).dialog('option', 'position', 'top center');
});

你可以在http://jameswadeweaver.com/portfolio.php看到这个

页面底部的摄影部分是我遇到居中问题的地方。

【问题讨论】：

标签： jquery jquery-ui position positioning jquery-ui-dialog

【解决方案1】：

这不是中心问题。这是一个大小问题。您的对话框是在图像加载之前创建的，因此它使用一些基本的尺寸框，它是居中的。但随后图像完成加载并溢出对话框容器。

我建议将加载事件处理程序添加到将您的.dialog(...) 代码移动到那里的 img 标记。类似的东西

$('.photos').click(function()
{
    $("<img/>")
        .on("load", function() { $("<div/>").append(this).dialog(...); })
        .prop("src", $(this).prop("src").replace("_sm", "_lg"));
});

或者，您可以在窗口加载时将大图像预加载到隐藏的 div 中，这样就不会出现这种延迟。

【讨论】：

这将是我的第一个建议，但是看看 OP 如何将他的对话代码附加到许多不同的图像上，这些图像可能具有不同的大小，这可能不是一个选项。
但是如果原始<img class="photo"> 将它们作为数据属性，那么您可以获得对话框版本的width 和height。这就是我至少会做的，但负载处理程序对于懒惰的人来说是一个合理的解决方案:) 或者对于那些无法访问服务器代码的人。
这当然是您可能想要发布的另一个选项作为答案。我不会，因为我喜欢独立的解决方案。

【解决方案2】：

liho1eye 已经涵盖了您问题的根源并提供了合理的解决方案，但还有另一种可能。

如果您知道大小图像的尺寸，那么您可以将 HTML 更改为如下所示：

<img id="photo1"
    class="photos opacity"
    src="images/photos/angledBuilding_sm.jpg"
    alt="photography"
    width="281"
    height="161"
    data-lg-width="1123"
    data-lg-height="642" />

当然，这里的尺寸只是由数字组成。然后，您可以在显示对话框之前读取数据属性以正确调整对话框大小：

$('.photos').click( function() {
    var $this  = $(this);
    var id     = this.id;
    var src    = this.src;
    var width  = $this.data('lg-width');
    var height = $this.data('lg-height');

    //...

    var $dialog = $('<div>').append(
        $('<img>', {
            src: srcNew,
            width: width,
            height: height
        })
    );
    $dialog.dialog({
        //...
    });
    //...
});

然后在显示对话框时会知道图像大小和对话框大小，并且对话框可以正确定位。

【讨论】：