在Javascript中将一个元素放置在另一个元素下面_Javascript_Dhtml

在Javascript中将一个元素放置在另一个元素下面

javascript

在Javascript中将一个元素放置在另一个元素下面,javascript,dhtml,Javascript,Dhtml,我试图创建一个类似于单击此处的“flag”链接时显示的对话框（但不使用JQuery或任何其他库）单击“显示对话框”链接时，下面的代码将显示一个对话框。代码运行得很好，除了一件事，那就是当页面的文本被调整大小时，对话框不会显示在链接下面，这是如何修复的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

我试图创建一个类似于单击此处的“flag”链接时显示的对话框（但不使用JQuery或任何其他库）

单击“显示对话框”链接时，下面的代码将显示一个对话框。代码运行得很好，除了一件事，那就是当页面的文本被调整大小时，对话框不会显示在链接下面，这是如何修复的

<!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>


试验
函数显示对话框（链接）
{
var dlgID=“popupDialog”；
如果（！document.getElementById（dlgID））
{
dialog=document.createElement（“div”）；
dialog.id=dlgID；
dialog.style.position=“绝对”；
dialog.style.width=“200px”；
dialog.style.zIndex=“100”；
dialog.style.padding=“10px”；
dialog.style.backgroundColor=“#FF0000”；
dialog.innerHTML=
“冲突类型：
”+
“选项1
”+
“选项2
”+
“选项3
”+
“备选方案4”+
“