logo标签列表

使用Javascript将元素定位在另一个元素下方

javascriptdhtml
3

我正在尝试创建一个类似于单击SO上的“标记”链接时显示的对话框（但不使用JQuery或任何其他库）。

下面的代码在单击“Show Dialog”链接时显示对话框。代码非常有效，除了一个小问题，就是当页面文本被调整大小时，对话框不会显示在链接下方。如何解决这个问题？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">

function ShowDialog(link)
{
  var dlgID = "popupDialog";
  if(!document.getElementById(dlgID))
  {
    dialog = document.createElement("div");
    dialog.id = dlgID;
    dialog.style.position = "absolute";
    dialog.style.width =  "200px";
    dialog.style.zIndex = "100";
    dialog.style.padding = "10px";
    dialog.style.backgroundColor = "#FF0000";
    dialog.innerHTML = 
      "Violation Type:<br />" +
      "<input type='radio' id='Option1' name='ViolationType' checked='checked' /><label for='Option1'> Option 1</label><br />" +
      "<input type='radio' id='Option2' name='ViolationType' /><label for='Option2'> Option 2</label><br />" +
      "<input type='radio' id='Option3' name='ViolationType' /><label for='Option3'> Option 3</label><br />" +
      "<input type='radio' id='Option4' name='ViolationType' /><label for='Option4'> Option 4</label>" +
      "<p style='text-align:right;margin-top:10px;'><input type='button' value='OK' /> <input type='button' value='Cancel' /></p>";
    document.body.appendChild(dialog);
  }
  else
  {
    dialog = document.getElementById(dlgID);
  }

  dialog.style.visibility = "visible";
  dialog.style.left = getX(link) + "px";
  dialog.style.top = getY(link) + link.offsetHeight + "px";
}

function getY(oElement)
{
  var iReturnValue = 0;
  while (oElement != null)
  {
    iReturnValue += oElement.offsetTop;
    oElement = oElement.offsetParent;
  }
  return iReturnValue;
}

function getX(oElement)
{
  var iReturnValue = 0;
  while (oElement != null)
  {
    iReturnValue += oElement.offsetLeft;
    oElement = oElement.offsetParent;
  }
  return iReturnValue;
}

</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin enim diam, imperdiet eget, luctus eget, rhoncus vel, lacus. Maecenas ipsum nulla, pretium vel, vehicula a, tincidunt luctus, dui. Donec adipiscing. Sed aliquet, lorem id porttitor vestibulum, libero pede pretium sem, id iaculis mauris ante a orci. Etiam mi felis, adipiscing nec, aliquet vel, hendrerit non, libero. Curabitur posuere pede vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sem. Pellentesque iaculis. Morbi at tellus a velit venenatis tempor. Vivamus quam augue, commodo sed, dapibus nec, posuere in, augue. Mauris ultrices. Integer fringilla turpis et dui. Quisque varius elementum ipsum. Aenean pede. Sed vestibulum condimentum ipsum.<br />
Lorem ipsum dolor sit amet <a href="#" onclick="ShowDialog(this);return false;">Show Dialog</a><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin enim diam, imperdiet eget
</body>
</html>
1个回答
2
在这种情况下，有一个非常有效的“hack”方法。只需在window.onresize()事件中触发链接的点击事件即可。
将以下内容添加到您的脚本标签顶部：
<script type="text/javascript">
var myLink;
window.onresize = function()
{
   myDialog = document.getElementById("popupDialog");
   if(myDialog && myDialog.style.visibility == "visible")
   {         
      myLink.fireEvent("onclick");
   }
}
function ShowDialog(link)
{
  myLink = link;
  var dlgID = "popupDialog";
  if(!document.getElementById(dlgID))
  {
    dialog = document.createElement("div");
    dialog.id = dlgID;
    dialog.style.position = "absolute";
    dialog.style.width =  "200px";
    dialog.style.zIndex = "100";
    .........
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接