Teilzeitelf
Ein Teilzeitelf
- 29 April 2006
- 1.105
- 127
Hallo,
Ich habe folgendes Problem:
Auf der Seite, an der ich arbeite, gibt es HTML-Popups (positionierte DIV's mit höherem z-Index als die Hauptseite). Ich möchte zwischen der Seite und dem Popup ein halbtransparentes div legen, das immer den kompletten Bildschirm füllt.
Popup und Zwischenebene werden dynamisch per JavaScript angelegt. Das funktioniert soweit auch - allerdings nur wenn das Browserfenster auf Vollbild steht. In dem Fall bekomme ich genau den Effekt den ich möchte: Der Bildschirm verdunkelt sich (durch die Zwischenebene) und das Popup liegt darüber.
Befindet sich das Browserfenster jedoch im "Fenstermodus" hört die Zwischenebene auf halber Strecke auf. Maximiere ich dann das Browserfenster passt wieder alles.
Ich hoffe das ist soweit verständlich
Mein CSS dazu sieht so aus:
Die Integration im HTML so:
Hat jemand eine Idee ?
Gruß,
TZE
Ich habe folgendes Problem:
Auf der Seite, an der ich arbeite, gibt es HTML-Popups (positionierte DIV's mit höherem z-Index als die Hauptseite). Ich möchte zwischen der Seite und dem Popup ein halbtransparentes div legen, das immer den kompletten Bildschirm füllt.
Popup und Zwischenebene werden dynamisch per JavaScript angelegt. Das funktioniert soweit auch - allerdings nur wenn das Browserfenster auf Vollbild steht. In dem Fall bekomme ich genau den Effekt den ich möchte: Der Bildschirm verdunkelt sich (durch die Zwischenebene) und das Popup liegt darüber.
Befindet sich das Browserfenster jedoch im "Fenstermodus" hört die Zwischenebene auf halber Strecke auf. Maximiere ich dann das Browserfenster passt wieder alles.
Ich hoffe das ist soweit verständlich
Mein CSS dazu sieht so aus:
HTML:
body, html {
height: 100%;
}
.popup_background {
width:100%;
background-color:black;
opacity:0.5;
position:absolute;
top: 0px;
left: 0px;
height: 100%;
min-height: 100%;
}Die Integration im HTML so:
HTML:
<!--?xml version="1.0" encoding="UTF-8" ?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"/>
<script type="text/javascript" src="js/basic.js"/>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
</head>
<body>
<div id="layout"> (Inhalt der Seite + Popup hier drinne)</div>
<div id="popup_background1" class="popup_background" style="z-index: 51"/>
</body>
</html>Hat jemand eine Idee ?
Gruß,
TZE
