在 onClick() 事件上"Dock"一个 div 元素之上

那么我该怎么做呢？我需要在另一个div 上方设置/停靠一个div 元素(包含一些其他div 和表单对象(。对接div 充当某种输入框对话框，它应该出现在您单击的元素的正上方，就我而言，我将 onClick() 事件设置在...

Click <span onClick="showInputbox()">here</span> to set value元素。

不确定这是否可以仅使用 CSS 实现，但我将不胜感激任何帮助。提前非常感谢！

编辑：我

实际上在定位方面遇到了问题：将一个元素(我应该说(放在另一个元素(标签或跨度文本元素(之上，而不是显示隐藏元素。

至于剧本：

function showInputbox(){
var txt = document.getElementById("txtHere").style;
var dlgInput = document.getElementById("dlgInput").style;
dlgInput.top = txt.top + dlgInput.height;
dlgInput.left = txt.left;
dlgInput.visibility = "visible";
}

这行不通，我的意思是，.top和.left总是显示null，我做错了什么？

由于你想将两个同级divs一个放在另一个之上，你可以利用它们具有相同父级的事实并使用 CSS 进行定位。

第一个示例可以在这里看到。这是做什么的：

HTML 是一个简单的结构，正如您所说，具有 2 个具有共同父级的 2 divs。
在CSS中，我为divs和背景提供了宽度和高度。另外，我将开头应该隐藏的第一个div的display设置为 none .
我还将隐藏div设置为 position:absolute .这允许我使用诸如bottom、left、right、top之类的东西。
您可以看到我向父元素添加了position:relative。我这样做是因为position:absolute将相对于position为 relative 或 absolute 的第一个父元素进行定位。
比我使用 jQuery 库添加 onClick() 事件，该事件将在单击第二个div时将display:block添加到隐藏div。
确保在 DOM 完全加载时添加 onClick() 事件(DomReady，在发布的 jsFiddle 中选择，使用 jQuery，您有 ready 事件(。

注意：jQuery部分也可以只用javascript完成，但我建议使用它，因为它节省了大量的工作时间，而且它真的很常见。

更新：

http://jsfiddle.net/GLf4X/5/

.HTML：

<div id="parent">
    <div id="child1">
    </div>
    <div id="child2">
    </div>
    <div id="child3">
    </div>
</div>

.CSS：

#child1{
    width:300px;
    height:50px;
    background:#333;
    display:none;
    position:absolute;
    bottom:100%;
}
#child2{
    width:300px;
    height:50px;
    background:#666;
    margin-bottom:100px;
}
#child3{
    width:300px;
    height:50px;
    background:#999;
}
#parent{
    margin:60px auto;
    position:relative;
}

Javascript：

function getOffset( el ) {
    var offset = { top: 0, left:0 };
    if( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        offset.left = el.offsetLeft - el.scrollLeft;
        offset.top = el.offsetTop - el.scrollTop;
    }
    return offset;
}
function displayAboveElement(event){
    event.stopPropagation();
    var divToShow = document.getElementById('child1'),
        clickTarget = event.target;
        offset = getOffset(clickTarget);
    divToShow.style.display = 'block';
    console.log(clickTarget.style);
    divToShow.style.top = (offset.top - clickTarget.clientHeight) + 'px';
    divToShow.style.left = offset.left + 'px';
}
document.getElementById('child2').onclick = displayAboveElement;
document.getElementById('child3').onclick = displayAboveElement;

你的问题是什么：

您正在尝试从未设置的元素中读取left和top。这就是为什么它们是空的。
left和top仅对position:absolute元素有效。
我所知，元素的style返回内联样式属性，我认为您不希望这样做。

如您所见，在没有库的情况下编写 javascript 时需要考虑很多事情(此外，您必须支持 4-5 个浏览器，在一个浏览器中工作的代码可能无法在另一个浏览器中工作(。这就是为什么我建议使用像jQuery这样的库。

我做了什么：

计算单击元素相对于其直接父级的顶部和左侧偏移量。
将这些值作为内联样式添加到必须显示的div。

更新：

相关内容

最新更新

热门标签：