jQuery用户界面对话框定位

Question

我试图使用jQuery dialog UI库来定位对话框旁边的对话框，当它被悬停时。 jQuery对话框使用从当前视口左上角开始测量的位置参数（换句话说，无论当前滚动到哪里，[0, 0]将始终将其放在浏览器窗口的左上角）。但是，我知道检索位置的唯一方法是相对于整个页面的元素。

以下是我目前的。 position.top的计算结果大概是1200左右，这会使对话远远低于页面上的其余内容。

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

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

谢谢！

Answer 1

查看一些用于其他对话框实现的jQuery插件。 Cluetip似乎是一个功能丰富的工具提示/对话框样式插件。第四个演示听起来类似于您正在尝试执行的操作（虽然我看到它没有您正在寻找的精确定位选项）。

Answer 2

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

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

如果我正确地理解你的问题，你的代码是定位对话框，如果页面没有滚动，但你想让它考虑滚动。我的代码应该这样做。

Answer 3

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

Answer 4

阅读所有的答复之后，这次终于为我工作：

$(".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]); 
}); 

Answer 5

以Jaymin的例子更进了一步，我想出了这个用于定位你刚刚点击的元素上面一个jQuery UI的对话框元素（认为​​“对话气泡”）：

$('#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-对话框元件。这是因为如果没有ui-dialog元素实际出现在页面中，jQuery不能评估outerWidth（）或outerHeight（）。

只要确保在对话框选项中将'modal'设置为false，您应该是OK。

Answer 6

可以使用$(this).offset()，位置与父

Answer 7

有点晚了，但你可以通过使用附加$ J（对象）.offset（）。左做到这一点，现在并相应.TOP。

Answer 8

作为替代方案，您可以使用例如jQuery UI Position utility

$(".mytext").mouseover(function() { 
    var target = $(this); 
    $("#dialog").dialog("widget").position({ 
     my: 'left', 
     at: 'right', 
     of: target 
    }); 
} 

Answer 9

我不认为讲话泡泡是对的。我调整了一下，这样它就可以工作，并且该项目在链接下方打开。

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

Answer 10

$(".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的位置，该位置相对于元素的父级。

Answer 11

我尝试了很多方法可以让我的对话框在页面上居中，看到代码：

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

永远不变的对话框位置这是创建时。

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

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

为中心我对话，我用的是jQuery-Client-Centering-Plugin

$（ “＃对话”）父（）centerInClient（）。

Answer 12

由于一些答案上面，我尝试，最终发现，所有你需要做的是编辑在模态对话框定义中的“位置”属性：

position:['middle',20], 

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

我心里的JQuery。

Answer 13

我试过所有建议的解决方案，但他们不会工作，因为对话框不是主要文档的一部分，将有其自己的层（但多数民众赞成我的教育猜测）。

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]);

这样坐标来自对话框而不是文档，位置根据对话框的层次而改变。

Answer 14

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

Answer 15

要解决的中心位置，我用：

以上

open : function() { 
    var t = $(this).parent(), w = window; 
    t.offset({ 
     top: (w.height()/2) - (t.height()/2), 
     left: (w.width()/2) - (t.width()/2) 
    }); 
} 

Answer 16

解决方案是非常真实的...但调整窗口大小后，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] 
          }); 
      }) 

Answer 17

这里是代码..，如何定位的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'); 

    }); 

Answer 18

纠正错误之上控制，您可以使用此代码：

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

... 
    }); 

Answer 19

检查<!DOCTYPE html>

我注意到，如果您错过了HTML文件顶部的<!DOCTYPE html>，则即使您指定了位置：{my：'center'，at： 'center'，of：window}

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

Answer 20

$("#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});    
     } 
    }); 

Answer 21

您的CA集合顶部位置在风格上中心显示，看到的代码：

的.ui-对话框：;

这种风格应该显示对话框顶部{100像素重要！}从顶部100px波纹管。