html - 绝对 div 覆盖 iframe 边框？

Question

我想知道是否有办法让一个绝对定位的 div 悬停在 div 所在的 iframe 的边框上。这可以做到吗？

我的情况:我有一个带有文件列表的 iframe，每个文件的右端都有一个按钮。我想要一个带有上下文菜单等功能的 div-popup。但是因为这个按钮位于 iframe 的边缘，绝对定位的 div 被放在 iframe 视口(viewport)的后面/外面。我希望它覆盖在我文档的其余部分中，在 iframe 之外。

​<iframe width="100" height="100">
div would be in here, say 300 x 100 px.
</iframe>
overlayed div should be visible here as well, basically the div should overlay the iframe.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 1

嗯，从技术上讲，您不能那样做。但是，如果您劫持了 iframe 中的事件，则可以在主窗口中重新创建上下文菜单，并使用 iframe 中 div 的相对位置 + iframe 本身的绝对位置。

因此，总而言之，上下文菜单可以在 iframe 之外，并由 iframe 内的事件操作。

让我向您展示如何做到这一点。我没有你的代码，所以我只是做一个非常粗略的概念证明。 :)

Example |代码

HTML

<iframe id='my_frame'></iframe>

<div id='copy_to_frame'>
    <ul id='files_list'>
        <li>data.dat</li>
        <li>manual.html</li>
        <li>readme.txt</li>
        <li>model1.obj</li>
        <li>human_model.obj</li>
    </ul>
</div>

<div class='context_menu'>
    <ul>
        <li>Delete</li><li>Open</li><li>Move</li><li>Copy</li>
    </ul>
</div>

Javascript

//Declare the necessary variables, good practice
var frame = $("#my_frame"),
    frame_contents = frame.contents(),
    frame_body = frame_contents .find("body"),
    copy_list = $("#copy_to_frame"),
    context_menu = $(".context_menu");

var bInside = false;

//Fill the iframe with a list
frame_body.html(copy_list.html());
copy_list.hide();
paint();

//Attach event handler for context menu popup etc.
$("#files_list li", frame_body).click(function(e){
    var $this = $(this);
    var rel_x = $this.position().left + $this.outerWidth() + 5,
        rel_y = $this.position().top + $this.outerHeight()/2 - context_menu.outerHeight()/2 - frame_body.scrollTop(),
        abs_x = frame.offset().left,
        abs_y = frame.offset().top;

    e.stopPropagation();

    context_menu.css({
        top: rel_y + abs_y,
        left: rel_x + abs_x
    });

    //Show the context menu in this window
    context_menu.show();
    paint($this);
});

//Hide when clicking outside the context menu
$(document).add(frame_body).click(function(){
    if(!bInside){
        context_menu.hide();
        paint();
    }
});

//Determine if mouse is inside context menu
context_menu.mouseenter(function(){
    bInside = true;
}).mouseleave(function(){
    bInside = false;
});

function paint(el){
    $("#files_list li", frame_body).css({
        "background-color": "white",
        "border": "1px solid transparent"
    });

    if(el){
        el.css({
            "background-color": "#ddecfd",
            "border": "1px solid #7da2ce"
        });
    }
}

CSS

#my_frame{
    position: absolute;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    top: 50%; left: 50%;
    margin-top: -62.5px;
    margin-left: -100px;
    z-index: 1;
}


.context_menu{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 2;
}

.context_menu ul{
    border: 1px solid black;
    border-right: 0;
    display: inline-block;
}

.context_menu li{
    display: inline-block;
    border-right: 1px solid black;
    padding: 2px;
    text-align: center;
    margin: 0px;
    cursor: default;
}

.context_menu li:hover{
    background-color: lightgray;
}