jQuery UI对话框定位

116

我试图使用jQuery对话框UI库，以便将鼠标悬停在某些文本旁边。jQuery对话框采用的位置参数是从当前视口的左上角开始测量的（换句话说[0, 0]，无论当前滚动到何处，始终将其放在浏览器窗口的左上角）。但是，我知道检索位置的唯一方法是相对于整个页面的元素。

以下是我目前所拥有的。 position.top计算得出的结果大约是1200左右，这使对话框远低于页面上其余内容。

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

如何找到正确的位置？

谢谢！

jquery  jquery-ui 
— Wickethewok
source
2
从1.9版开始，有一个本机工具提示窗口小部件。
— theblang 2013年

Answers:

13

查看一些jQuery插件以获取对话框的其他实现。 Cluetip似乎是功能丰富的工具提示/对话框样式的插件。第四个演示听起来与您要尝试执行的操作类似（尽管我看到它没有您想要的精确定位选项。）

— 本·科勒
source
链接断开。我敢说这个插件不再维护。也许选择另一个答案是明智的？
— JohnK
109

或者，您可以使用jQuery UI Position实用程序，例如

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
— 布莱恩·亨特
source
29
这是最好的方法。不过，我会指出，如果是第一次创建对话框，您将需要一个额外的调用，dialog例如：$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
— wsanville 2010年
26
jQuery UI位置实用程序不适用于隐藏的元素，因此您必须先打开对话框，然后才能使用此代码定位对话框。
— Toadmyster，2011年
1
jQuery UI是最好的方法。斯科特·冈萨雷斯拥有jQuery UI的工作原理以及如何使用它进行了深入的解释
— strangeloops
我感到困惑的是，例如必须是：at: 'top+50'而不是at: 'top + 50'
— Lamy
对于那些在如何设置多个职位上挣扎的人（就像我刚才那样）： $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
— 米尔普尔
81

由于上面的一些回答，我进行了实验，最终发现您所要做的就是编辑“模态对话框”定义中的“ position”属性：

position:['middle',20],

JQuery的水平“ X”值的“中间”文本没有问题，并且我的对话框在中间弹出，从顶部向下20px。

我心JQuery。

— 用户名
source
无需任何其他插件即可直观运行。我见过的最好的解决方案。
— PlanetUnknown
非常简单的解决方案，无需其他插件。这应该是公认的答案。
— kamui 2013年
13
达恩，这很好，但是不建议使用-“注意：不建议使用String和Array形式。” api.jqueryui.com/dialog/#option-position 因此，您需要使用my / at / ofthing的位置对象。请参阅有关“ jQuery UI位置”的链接。您可以获得类似位置的信息：{my：“ center top”，at：“ center top + 20”，of：window}可以按需要工作。有关更多示例，请参见链接。
— mikato
@mikato ...根据jquery ui 1.10，position确实接受字符串和数组。……但是我仍然喜欢对象表示法（我喜欢按键）。
— dsdsdsdsd 2013年
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]);
});
— 杰明·帕特尔（Jaymin Patel）
source
这个答案对我有用，并可能为我节省了数分钟/数小时的谷歌搜索方式来设置其他解决方案的时间。谢谢！
— 内森
1
+1当我理解.position（）给出相对位置和.offset（）绝对位置（我需要的）时，这对我
— 很有帮助
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元素的情况下评估externalWidth（）或outsideHeight（）。

只要确保在对话框选项中将'modal'设置为false，就可以了。

— 标记
source
1
我觉得你的两个变量意味着是myDialogX和myDialogY
— 凯西
16

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");
});
— 霍恩
source
对我来说，这是最简单的方法，只需一个属性即可解决。我不知道可以使用方括号语法以及高度/宽度等来提及“位置”。
— user734028 '19
我不知道，是太久以前了：D
— xhochn
15

检查你的 <!DOCTYPE html>

我注意到，如果您错过了<!DOCTYPE html>HTML文件顶部的，即使您指定位置：{my：'center'，at：'center'，对话框也将显示在文档内容的中心而不是窗口的中心，共：window}

EG：http : //jsfiddle.net/npbx4561/-从运行窗口复制内容并删除DocType。另存为HTML并运行以查看问题。

— Daniel Flippance
source
2
这是我遇到的确切问题，并且已解决。
— BobRodes
1
我的xml转换无法添加doctype，此答案以及：stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt让我忙不迭。
— Daniel Bower
1
我希望有不止1个赞扬这个好答案。它解决了我为数小时而苦苦挣扎的问题。
— DS博士
10

要将其置于控件之上，可以使用以下代码：

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

...
    });
— 真爱
source
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的位置。

— 贝伦
source
6

而不是做纯粹的jQuery，我会做：

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

如果我正确地理解了您的问题，则您所拥有的代码会将对话框定位为页面没有滚动，但是您希望它考虑滚动。我的代码应该这样做。

— 塞缪尔
source
由于某些原因，document.scrollleft对我来说是未定义的。
— Wickethewok，2009年
2
我的坏人，它的scrollLeft scrollTop忘记大写
— Samuel
var x = el.position（）。left + el.outerWidth（）; var y = el.position（）。top-$（document）.scrollTop（）; 为我工作。问题是更改对话框中的信息后，无法获得对话框的高度和宽度。
— rball
4

此页面显示了如何确定滚动偏移量。jQuery可能具有类似的功能，但我找不到它。使用页面上显示的getScrollXY函数，您应该能够从.position（）结果中减去x和y坐标。

— 菲利普·廷尼
source
4

有点晚了，但是您现在可以通过相应地使用$ j（object）.offset（）。left和.top来执行此操作。

— 用户名
source
4

我认为讲话泡泡是不正确的。我对其进行了一些调整，以使其正常工作，并且该项目在链接下方打开。

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
— 悬崖
source
3

要确定中心位置，我使用：

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
— 爱德华多·库莫（Eduardo Cuomo）
source
3

这是代码。.，如何将jQuery UI对话框放置在中心位置...

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });
— Manu RS
source
3 
$("#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});              
         }
    });
— 古尼斯·埃德米（GünesErdemi）
source
2

您可以使用$(this).offset()，位置与父级相关

— 唐il
source
2

我已经尝试了所有建议的解决方案，但是它们无法正常工作，因为该对话框不是主文档的一部分，而是具有自己的层（但这就是我的有根据的猜测）。

  1. 使用初始化对话框 $("#dialog").dialog("option", "position", 'top')
  2. 用打开 $(dialog).dialog("open");

  3. 然后获取显示的对话框的x和y（不是文档的任何其他节点！）

    var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

    var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

    $(dialog).dialog('option', 'position', [xcoord , ycoord]);

这样，坐标是来自对话框的，而不是来自文档的，并且位置会根据对话框的层进行更改。

— 山先生
source
1

我尝试了多种方法来使对话框位于页面的中心，并看到代码：

$("#dialog").dialog("option", "position", 'top')

创建对话框时，切勿更改对话框的位置。

取而代之的是，我更改选择器级别以获取整个对话框。

$("#dialog").parent() <-这是dialog（）函数在DOM上创建的父对象，这是因为选择器$（“＃dialog”）不应用属性top，left。

为了使对话框居中，我使用jQuery-Client-Centering-Plugin

$（“＃dialog”）。parent（）。centerInClient（）;

— 莫兹科
source
1

以上解决方案非常正确...但是在调整窗口大小之后，UI对话框不会保留位置。下面的代码这样做

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })
— Kaustubh-凯
source
0

您可以设置样式的最高位置以显示在中心，看到以下代码：

.ui-dialog {top：100px！important;}

此样式应从顶部下方显示对话框100px。

— 桑杰·詹吉德
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.