0

ページの中央に表示されるポップアップ ボックスを作成しようとしています。外側のボックスは、使用している CMS によって定義され、overflow:hidden および width:250px スタイルが添付されています。「外側の箱から出たい」内側の箱は私たちの管理下にあり、ほとんど何でもできます。

残念ながら、私たちが IE で試したすべてのことは、親ボックスの overflow:hidden のグリップからポップアップを「エスケープ」させません。この場合、ポップアップを親 div の外に移動することはできません。

注 - テストした他のすべてのブラウザは、希望どおりに動作します。

簡単な例を次に示します。

<html>
<body>
    <div style="width:250px; overflow:hidden; background-color:#dddddd;">
        <p>
            Here is some text that appears within the primary outer box.
        </p>
        <div id='popup2' style="position:absolute; z-index:500; top:0px; left:0px; width:400px; height:200px; background-color:pink;">
            <a href="#" onclick="document.getElementById('popup2').style.display = 'none'; return false;">Close</a><br/>
            This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup.
            This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup.
            This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup. This is the popoup.
        </div>
    </div>
</body>
</html>
4

1 に答える 1

1

現時点では IE9 でしかテストできませんが、strict doctype を含めると正しく動作します。

http://jsfiddle.net/wgWZv/

jsfiddle は html 5 を使用します 

<!DOCTYPE HTML>

4 strict でテストしましたが、同様に機能します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2012-04-25T02:51:13.457 に答える