3

I'm trying to create a dialog similar to the one that shows when clicking the 'flag' link here on SO (without using JQuery or any other library though).

The code below displays a dialog when the Show Dialog link is clicked. The code works very well except one thing which is that when the text of the page is resized, the dialog doesn't display below the link, how can this be fixed?

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

1 回答 1

2

这是一个在这种情况下效果很好的“hack”。只需触发 window.onresize() 事件内的链接的 click 事件。

将以下内容添加到脚本标记的顶部：

<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";
    .........
于 2009-05-08T10:42:26.453 回答