如何将div放在两个iframe上,其中一个iframe具有外部(不同域)内容？

Question

如何将div放在两个iframe上,其中一个iframe具有外部(不同域)内容？

我正在寻找一种方法来定位一个div(它将是一个弹出窗口,可以通过悬停和/或点击很像灯箱的方式激活)在一个拆分的iframe上,其中顶部iframe是我服务器的内容和底部iframe是来自另一台服务器的内容.像这样:

 ----------------------------------------
 |                                      |
 |                   Upper              |
 |                                      |
 |           -------------------        |
 |          |      DIV          |       |
 ---------                       -------|
 |          |                   |       |
 |          --------------------        |
 |                                      |
 |                 Lower                |
 |                                      |
 ----------------------------------------

基本上它看起来像是在顶部(上部)和底部(下部;外部内容)之间水平分割的盒子和悬停在两者之上的DIV,因此顶部和底部都有重叠.

顺便说一句,我还发布了另一个问题:ajax与iframes的外部内容以及我应该在这个实例中使用的内容.因此,较低(外部内容)不一定必须是iframe,具体取决于答案.

Answer 1

And*_*are 5

看看这个:

http://ahare.us/test.html

这个页面几乎可以满足您的要求.我会尽可能地避免使用z-index,因为一旦你走上这条道路,你就会以可能变得痛苦的方式致力于它.

(只是你知道我在Firefox 3和IE 6中测试过这个).

这是代码 - 我有#pop div的两个规则,第一个是纯粹的表示,第二个规则有定位样式,使整个事情工作.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            iframe { width:500px; height:200px; }
            #pop { width:400px; height:300px; background:#ff9; }
            #pop { position:absolute; top:50px; left:50px; }
        </style>
    </head>
    <body>
        <div id="pop">this is the popup</div>   
        <div>
            <iframe src="content.html"></iframe>
        </div>
        <div>
            <iframe src="http://www.google.com"></iframe>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年，2 月前
查看次数：	10685 次
最近记录：	17 年，2 月前