logo标签列表

jQuery UI对话框定位

jqueryjquery-ui
118
我正在尝试使用jQuery对话框UI库，以便在鼠标悬停在某些文本上时将对话框定位到其旁边。jQuery对话框需要一个位置参数，该参数是从当前视口的左上角测量的（换句话说， [0,0] 将始终将其放置在您的浏览器窗口的左上角，而不管您当前滚动到哪里）。但是，我知道的唯一检索元素位置相对于整个页面的方法是。
以下是我目前拥有的内容。position.top计算出来大约是1200左右，这将使对话框远低于页面上的其他内容。
$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

我该如何找到正确的位置？

谢谢！

2
从版本1.9开始，有一个本地的工具提示小部件。 - theblang
21个回答
111

作为一种替代方案，你可以使用jQuery UI Position工具，例如：

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
30
这是最佳方法。但需要注意的是，如果你是第一次创建对话框，你需要额外调用 dialog 方法，像这样： $('#dialog').dialog({ width: 300 /* 插入你的选项 */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) }); - wsanville
27
jQuery UI的定位实用工具不能用于隐藏元素，因此您需要在使用以下代码对对话框进行定位之前打开它。 - Toadmyster
1
jQuery UI 是实现它的最佳方式。Scott González 详细解释了 jQuery UI 的工作原理以及如何使用它。 - strangeloops
我觉得很困惑，例如必须写成at: 'top+50'而不是at: 'top + 50'。 - Yasen
4
对于那些像我一样遇到困难的人，想要设置多个位置的方法如下：$('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, }); - milpool
85

感谢上面的一些答案，我进行了实验，并最终发现你只需要编辑Modal对话框定义中的“position”属性：

position:['middle',20],

JQuery在水平方向的"X"值上没有问题，我的对话框在中间弹出，距离顶部下方20像素。

我非常喜欢JQuery。

不需要任何额外的插件，直观易用。这是我见过的最佳解决方案。 - PlanetUnknown
这是一个非常简单的解决方案，没有需要安装的额外插件。这应该被接受作为答案。 - kamui
15
翻译：好的，但这已被弃用。"注意：字符串和数组形式已被弃用。" 您需要使用位置对象my/at/of来代替。请参阅关于“jQuery UI Position”的链接。您可以通过类似以下方式设置position属性来达到您想要的效果：position: { my: "center top", at: "center top+20", of: window }。请参阅链接以获取更多示例。 - Michael K
1
@mikato 根据jquery ui 1.10的文档，position选项接受字符串和数组。但是我仍然喜欢对象表示法（我喜欢键）。 - dsdsdsdsd
3
我不敢相信只是为了定位一个对话框弹出窗口，需要这么多的代码。 - Gi1ber7
42

在阅读了所有回复后，我最终找到了解决方法：

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});
这个答案对我很有用，也让我省去了很多时间去搜索如何设置其他解决方案。谢谢！ - Nathan
1
+1 当我理解 .position() 给出相对位置而 .offset() 给出绝对位置（这正是我需要的）时，它帮了我很大的忙。 - daniloquio
17

检查你的 <!DOCTYPE html>

我注意到，如果你在HTML文件头部遗漏了<!DOCTYPE html>，即使你指定了位置为：{ my: 'center', at: 'center', of: window }，对话框也会在文档内容中心而非窗口中心显示。

例如：http://jsfiddle.net/npbx4561/ - 复制运行窗口中的内容并删除DocType。另存为HTML并进行运行，以查看问题所在。

3
这正是我遇到的问题，而这解决了它。 - BobRodes
1
我的XML转换无法添加文档类型，这个答案以及https://dev59.com/QHA75IYBdhLWcg3wRWyc让我成功了。 - Daniel Bower
2
我希望能够获得超过1个赞，以表彰这个优秀的答案。它解决了我为之苦苦挣扎数小时的问题。 - Dr. DS
1
我的php脚本顶部打印了一个错误字符串，这就是导致这个问题的原因。你明白我需要首先检查什么。 - Abbas
17

http://docs.jquery.com/UI/API/1.8/Dialog

固定对话框示例，位于左上角：

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});
1
对我来说，这是最简单的方法，只需一个属性即可得到解决方案。我不知道“position”可以与上面的高度/宽度等一起使用方括号语法来提及。 - user734028
我一点头绪也没有，太久远了 :D - xhochn
16

参考Jaymin的例子，我进一步编写了以下代码，用于将jQuery ui-dialog元素定位在刚刚点击的元素上方（类似“气泡”）：

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );
请注意，在计算相对宽度和高度偏移量之前，我会“打开”ui-dialog元素。这是因为jQuery无法在ui-dialog元素实际出现在页面之前评估outerWidth()或outerHeight()。
只需确保在对话框选项中将'modal'设置为false，您就可以了解此方法。
1
我认为你的两个变量应该是 myDialogX 和 myDialogY。 - casey
12

查看一些jQuery插件，了解其他对话框的实现方式。 Cluetip 似乎是一个功能丰富的工具提示/对话框样式插件。第4个演示似乎与您尝试做的类似（尽管我看到它没有您正在寻找的精确定位选项。）

链接已损坏。我敢说这个插件已经不再维护了。也许选择另一个答案会更明智？ - JohnK
11
为了将其完全置于控制之下，您可以使用此代码：

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });
7
$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

将对话框放置在元素的正下方。 我使用offset()函数是因为它计算相对于浏览器左上角的位置，而position()函数计算相对于父div或iframe元素的位置。

7
$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接