Question

我有一个HTML页面＆amp;当点击一个链接时，我试图让一个弹出元素（只是一个显示在链接上的div框）出现在被点击的链接上方。我使用javascript来执行此操作，但我的问题是弹出元素位于链接下方，当它应位于链接之上时。

你知道我做错了什么吗？我该怎么办呢？

<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <style type="text/css" media="all">
        <!--

        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: center;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        body { padding: 20%; background-color: green; }

        .container { background-color: white; }
        .newEle { width: 100px; height: 100px; background-color: red; }

        -->
    </style>
    <script type="text/javascript">

        function getOffset( el ) 
        {     
            var _x = 0;
            var _y = 0;

            while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
            {
                _x += el.offsetLeft - el.scrollLeft;
                _y += el.offsetTop - el.scrollTop;
                el = el.parentNode;
            }     

            return { top: _y, left: _x }; 
        }  

        function onClick( n, ele )
        {
            // Should display a popup box just above the HTML element called "ele"
            // but what actually happens is that the box is displayed below the element
            // called "ele"

            var infoBox = document.createElement("div");

            infoBox.style.zIndex          = "5";
            //infoBox.offsetRight           = ele.offsetRight;
            //infoBox.offsetBottom          = parseInt(ele.offsetBottom, 10) - 200 + "px";
            infoBox.style.x                     = getOffset( ele ).left + "px";
            infoBox.style.y                     = getOffset( ele ).top  - 200 + "px";
            infoBox.style.width           = "200px";
            infoBox.style.height          = "200px";
            infoBox.style.backgroundColor = "blue";
            infoBox.innerHTML             = "Hello";

            document.body.appendChild( infoBox );
        }

    </script>
</head>

<body>

    <div class="container">
        <a class="newEle" onclick="onClick(1,this)">Create New Element</a>
    </div>

</body>
</html>

Answer 1

将此添加到您的css。

.container, .newEle {display: block; float: left;}

然后绝对定位你的元素。

Answer 2

（除了Carl Griffiths的帖子，看看这个）

检查您的代码，其原因在于您的链接：

在div之后附加新元素。
你说你有x和y风格。但它不适用于该元素。（使用firebug用于FF或在Chrome中使用开发人员工具）
假设您在新元素上成功添加了位置样式。您的下一个问题是，它将无法在页面上显示。我的意思是，如果你将顶部位置设置为-200px，它将相对位置对你的身体而不是你的链接。

可能的修复：

而不是使用document.body.appendChild( infoBox ); 像id="container"一样为您的div添加ID。然后用此替换你的追加。
```
var parentContainer = document.getElementById('container');
parentContainer.insertBefore(infoBox,parentContainer.firstChild);
```
我不确定您的infoBox.style.x，但您可以使用此infoBox.style.left = "0px;"和infoBox.style.top = "-200px"，然后您必须使用定位，例如相对/绝对
如果您按照第二个选项，则必须正确设置div的CSS样式。特别是body { padding: 20%; background-color: #CCCCCC; }如果您发现我的解释很难理解。这里有一个示例代码（jsfiddle），它并不像您想要的那样完美。但是你可以根据自己的需要使用增强功能。

Answer 3

我有一个可能使这个更简单的组件 - 它不像框架那样完整，但是它的功能非常好：

http://depressedpress.com/javascript-extensions/dp_panelmanager/

它基本上用HTML元素（现有的或生成的）创建“面板”，并提供使用它们的方法。位置，大小，不透明度，简单的动画，碰撞检测，方位等等。它肯定有洞，但它派上用场。

其中一个例子是一个简单的“popup definitions”，应该很容易修改以满足您的需求。

基本上，您可以为弹出窗口创建面板，还可以将单击目标转换为面板（示例显示了如何使用最少的代码执行此操作）。然后你的onClick事件处理程序可能有这样的东西：

  // Set the Popup panel to the same position as the clicked element.
PopPanel.setPosition(this.getPosition());
  // Shift the position of the popup panel up 210 pixels
PopPanel.shiftPosition([-210, 0]);
  // Show the panel
PopPanel.setDisplay("show");
  // Fade the panel in (Animate opacity)
PopPanel.setOpacity(100, 0 , 200);

当然，你并没有太远 - 而且已经给出的建议可能会解决你当前的问题。

使用javascript创建一种弹出窗口

3 个答案: