jquery对话框定位

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

我有以下标记

<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');
});

$（'.photos'）。单击（函数（）{
var id=this.id；
var src=this.src；
var lrg=“_lg”；
var sm=“\u sm”
var title='This title'；//创建一个单独的函数来设置图像的标题。
var srcNew=src.replace（sm、lrg）；
变量$dialogImg=''
变量$dialog=$（$dialogImg）
.html（$dialogImg）
.对话({
自动打开：对，
莫代尔：是的，
标题：“”+标题+“”，
宽度：“自动”，
高度：“自动”，
可调整大小：false，
可拖动：错误，
});
$dialog.dialog（'open'）；
对话框（'选项'，'位置'，'上止点'）；
});

你可以在

---

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

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

我建议将加载事件处理程序添加到img标记中，将

.dialog（…）

代码移动到那里。类似这样的东西

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

$（'.photos'）。单击（函数（）
{
$("
或者，您可以在窗口加载时将大型图像预加载到隐藏的div中，这样就不会有这种延迟。
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({
        //...
    });
    //...
});

$（'.photos'）。单击（函数（）{
var$this=$（this）；
var id=this.id；
var src=this.src；
var-width=$this.data（'lg-width'）；
变量高度=$this.data（'lg-height'）；
//...
变量$dialog=$（''）.append(
$('
然后，当对话框显示时，图像大小和对话框大小就会被知道，对话框可以正确定位。
这是我的第一个建议，但是看看OP如何将对话框代码附加到许多不同的图像上，这些图像可能大小不同，这可能不是一个选项。但是如果原始的
具有em作为数据属性，然后您可以获得对话框版本的
宽度
和
高度
或者对于那些无法访问服务器代码的用户。这当然是另一个选项，您可能希望将其作为答案发布。我不会这样做，因为我喜欢自包含的解决方案。