使用javascript生成一种弹出窗口_Javascript_Html_Css

使用javascript生成一种弹出窗口

javascript html css

使用javascript生成一种弹出窗口,javascript,html,css,Javascript,Html,Css,我有一个HTML页面&当点击一个链接时，我试图在点击的链接上方显示一个弹出元素（只是链接上方的一个div框）。我使用javascript来实现这一点，但我的问题是，当弹出元素应该位于链接上方时，它会位于链接下方你知道我做错了什么吗？我怎样才能纠正它 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&

我有一个HTML页面&当点击一个链接时，我试图在点击的链接上方显示一个弹出元素（只是链接上方的一个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>


函数getOffset（el）
{     
var x=0；
var _y=0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））
{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.parentNode；
}     
返回{top:_y，left:_x}；
}  
函数onClick（n，ele）
{
//应在名为“ele”的HTML元素上方显示一个弹出框
//但实际情况是，框显示在元素下面
//称为“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=“蓝色”；
infoBox.innerHTML=“你好”；
document.body.appendChild（信息框）；
}
创建新元素

将此添加到css中

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

然后绝对定位元素。

将此添加到css中

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

然后绝对地定位你的元素。

（除了卡尔·格里菲斯的文章外，请看一下这个）

检查您的代码时，其位于链接下方的原因是：

在div之后追加新元素

你说你有x和y风格。但它不适用于该元素。（使用firebug for FF或在Chrome中使用开发者工具）

假设您成功地在新元素上添加了位置样式。下一个问题是，它在页面上不可见。我的意思是，如果你把top位置设置为-200px，它将相对位置你的身体，而不是你的链接

可能的解决方案：

而不是使用

document.body.appendChild（infoBox）
向div添加一个id，如id=“container”
。然后用这个替换你的append
var parentContainer = document.getElementById('container');
parentContainer.insertBefore(infoBox,parentContainer.firstChild);


我不太确定你的infoBox.style.x
，但是你可以使用这个infoBox.style.left=“0px；”
和infoBox.style.top=“-200px”
然后你必须使用定位，例如相对/绝对
如果您遵循第二个选项，则必须正确设置div的CSS样式。特别是，如果您觉得难以理解我的解释，请使用此正文{padding:20%；background color:#cccccccc；}
。这里是一个示例代码（），它没有您想要的那么完美。但您可以根据自己的需要使用enhance
（除了卡尔·格里菲斯邮报，请看一下这篇文章）
检查您的代码时，其位于链接下方的原因是：
在div之后追加新元素
你说你有x和y风格。但它不适用于该元素。
（使用firebug for FF或在Chrome中使用开发者工具）
假设您成功地在新元素上添加了位置样式。
下一个问题是，它在页面上不可见。
我的意思是，如果你把top位置设置为-200px，它将相对位置
你的身体，而不是你的链接
可能的解决方案：
而不是使用document.body.appendChild（infoBox）
向div添加一个id，如id=“container”
。然后用这个替换你的append
var parentContainer = document.getElementById('container');
parentContainer.insertBefore(infoBox,parentContainer.firstChild);


我不太确定你的infoBox.style.x
，但是你可以使用这个infoBox.style.left=“0px；”
和infoBox.style.top=“-200px”
然后你必须使用定位，例如相对/绝对
如果您遵循第二个选项，则必须正确设置div的CSS样式。特别是，如果您觉得难以理解我的解释，请使用此正文{padding:20%；background color:#cccccccc；}
。这里是一个示例代码（），它没有您想要的那么完美。但您可以根据自己的需要使用enhance
我有一个组件可以使这变得更简单-它不像框架那样完整，但它在做什么方面做得非常好：

它基本上用HTML元素（现有的或生成的）创建“面板”，并提供处理它们的方法。位置，大小，不透明度，简单的动画，碰撞检测，方位等等。它肯定有洞，但它很方便
其中一个例子是一个简单的“”东西，它应该很容易修改以满足您的需要
基本上，您可以为弹出窗口创建面板，还可以将单击目标转换为面板（该示例显示了如何使用最少的代码实现这一点）。那么您的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);

当然，您还不算太远，已经给出的建议可能会解决您当前的问题。
我有一个组件，可以简化此过程-它不像框架那样完整，但它在功能上非常出色：

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