javascript - 如何在屏幕的特定位置创建一个 div？

Question

我想在屏幕上的特定位置创建一个弹出窗口/div，如下图所示

假设它应该在编辑按钮之后开始，并且它的位置应该与图像中显示的完全相同。

Answer 1

查看我的 JSFiddle我为你做的。这很容易做到。虽然这个例子需要 JQuery，但如果你摆弄:我相信它也可以在没有它的情况下运行:)

HTML:

<div id="box1">
    This is box 1
    <br />
    <button onClick="openEditBox();" id="editButton">Edit</button>
</div>
<div id="box2" style="display: none;">
    This is the edit box...
    <br />
    Edit stuff goes here...
</div>

JavaScript:

$(document).mouseup(function (e) {
    var container = $("#box2");

    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.hide();
    }
});

function openEditBox() {
    var editButtonPosition = $("#editButton").position();
    $("#box2").css({top: editButtonPosition.top + 20, left: editButtonPosition.left});
    $("#box2").show();
}

CSS:

#box1 {
    background-color: #AAA;
    border: 1px solid #333;
    padding: 10px;
    width: 200px;
}
#box2 {
    background-color: lightblue;
    border: 1px solid #333;
    padding: 10px;
    width: 200px;

    z-index: 1000;

    position: fixed;
    left: 0;
    top: 0;
}

在 JSFiddle 上实时运行它来测试它，看看它是如何工作的: http://jsfiddle.net/fpde7by8/

关于否决票:这里的人似乎讨厌简单的问题……但我看不出问题所在。每个人在某个时候都是初学者。