nicht angemeldet
hallo zusammen
ich versuche gerade, ein "modales fenster" zu erstellen (ich glaube, die nennt man so...?): beim klick auf einen link soll ein div als pseudo-popup angezeigt werden, während der hintergrund halbtransparent abgedimmt wird.
nach einigem knobeln klappt das auch schon sehr gut. :-) allerdings hab ich probleme mit der scrollbar.
wenn das "popup" angezeigt wird, soll der abgedimmte inhalt ja nicht mehr scrollbar sein. daher habe ich die scrollbar im javascript per overflow hidden ausgeblendet. das problem ist nun, dass sich das ganze abgedimmte inhaltsfenster um die halbe breite der scrollbar nach rechts verschiebt, wenn zuvor aufgrund der textlänge die scrollbar angezeigt war.
habt ihr eine idee, wie man dieses verschieben verhindern könnte?
ganz lieben dank für jeden hinweis!
lg, michelle
hier kommt der code:
xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mod-Test</title>
<link rel="stylesheet" type="text/css" href="mod_stil.css" />
<script src="mod_script.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<p> </p>
<p><a href="#" onclick="modal('mod_inhalt')">Box öffnen</a></p>
<p>...</p>
<p>Hier kommt viel Text, damit eine Scrollbar angezeigt wird...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div id="mod_greybox" style="display: none"> </div>
<div id="mod_inhalt" style="display: none">
<p><button onclick="modal('mod_inhalt')">Box schliessen</button></p>
</div>
</body>
</html>
------------------
css:
* {
padding: 0;
margin: 0;
}
body {
background-color: #0099FF;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
}
* html body { font-size: x-small; }
div#container {
width: 932px;
margin: 0 auto;
text-align: left;
background-color: #99CCFF;
}
#mod_greybox {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
z-index: 49;
}
#mod_inhalt {
position: absolute;
top: 10%;
left: 50%;
margin-top: 0px;
margin-left: -200px;
width: 400px;
height: 80%;
border: 1px solid #990000;
background-color: #FFFFFF;
text-align: left;
z-index: 50;
overflow: auto;
}
-------------------
js:
function modal(modinhalt) {
if (document.getElementById) {
if (document.getElementById(modinhalt).style.display == "none") {
document.getElementById(modinhalt).style.display = "block";
document.getElementById("mod_greybox").style.display="block";
document.getElementsByTagName("html")[0].style.overflow = "hidden";
document.getElementsByTagName("body")[0].style.overflow = "hidden";
} else {
document.getElementById(modinhalt).style.display = "none";
document.getElementById("mod_greybox").style.display="none";
document.getElementsByTagName("html")[0].style.overflow = "auto";
document.getElementsByTagName("body")[0].style.overflow = "auto";
}
}
}