Question

拥有一个由表单组成的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？

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

Answer 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;
}

页面变长时如何设置对话框的相对位置（滚动条被激活）？

1 个答案: