页面变长时如何设置对话框的相对位置(滚动条被激活)?

时间:2011-08-09 18:18:00

标签: javascript jquery

拥有一个由表单组成的Web应用程序,并将其设置为启动一个对话框,其中包含主题标签文本字段旁边的信息。 每当有人填写表单并点击提交时,表单的邮件正文(从表单的文本区域)显示在顶部, 表单显示在它下面。在此之前,我将其设置为固定(x,y),以使对话框显示在主题标签旁边。但是,现在,何时 页面变长,对话框不会出现在我的主题标签文本字段旁边。它显示的要低很多。

以下是找到职位的代码:

// Finds the position and adds 40px to the left axis.
function findPosition(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        curleft += 42;
//      alert ('[' + curleft + ', ' + curtop + ']');
        return [curleft,curtop];
    }
}

以下是调用此函数以在特定位置显示对话框的代码:

function displayDialog() {
    var subjectLabel = document.getElementById("myform.subjectLabel");
     $("#myDialog").dialog({
         open: function(event, ui) {
             jQuery('.ui-dialog-titlebar-close')
                         .removeClass("ui-dialog-titlebar-close")
                         .html('<span padding-right = "16px;">Close</span>');
         },
         hide: true,
         draggable: false,
         position: findPosition(subjectLabel),
         closeOnEscape: false
     });
}

如何设置它以便我的findPosition()计算在页面太长时(当需要滚动条时)不会错误计算?

有没有办法将相对定位设置为始终让对话框显示在主题标签右侧40px?

感谢您抽出宝贵时间阅读本文。

1 个答案:

答案 0 :(得分:1)

您可以使用CSS完成此操作。通过将标签的CSS设置为位置:相对并在位置:绝对中放置 div ,您可以将容器放在任何您想要的位置相对于标签。

请注意,如果您要尝试相对于表格单元格定位div,则需要做一些额外的工作。如果以上内容对您不起作用,请告诉我,我可以挖掘出完整的解决方案。

.mylabel {
    position: relative;
}
.mylabelfriend {
    display: none; /* if you don't want these 100% of the time */
    position: absolute;
    left: 40px;
    top: 0;
}