position: fixed met een modal window in IE6 ???

Status
Niet open voor verdere reacties.
N

nessler

Gebruiker
Lid geworden
31 mei 2005
Berichten
54
Hoi allen, ik zit met het volgende probleem.

Voor mijn website heb ik een mediapagina, met daarop telkens een foto die, als je er op klikt, een modal window opent. Dit modal window verwijst naar een html bestand met daarin een youtube filmpje.

Als de surfer in Firefox op de foto klikt, komt het filmpje te staan naast de foto.
Echter als je dit doet in internet explorer, blijkt het filmpje helemaal bovenaan te staan.
Dit wordt vervelend als je 10 videos lager telkens naar boven moet scrollen om het filmpje te zien.

Het liefste zou het modal window mogen meebewegen met het scrollen, maar het mag ook vast staan (fixed of absolute).

Daarom had ik graag jullie antwoord gehad, hoe kan ik dit oplossen voor IE 6 ?
Ik heb al meerdere mogelijke oplossingen zien staan op het internet en verschillende getest maar ik kom er niet uit.
Zou er mij iemand haarfijn kunnen uitleggen wat en waar ik iets dien te veranderen / toevoegen ?

Alvast bedankt !!

Dit is de code van de media pagina:

Code: 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="nl-be" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<title>.For the restless.</title>
<link href="http://www.fortherestless.com/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" lang="javascript" src="http://www.fortherestless.com/jquery-1.2.3.js"></script>
	<script type="text/javascript" lang="javascript" src="http://www.fortherestless.com/modal-window.js"></script>	
	<script type="text/javascript" lang="javascript">
	var openMyModal = function(source)
	{
		modalWindow.windowId = "myModal";
		modalWindow.width = 480;
		modalWindow.height = 405;
		modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'>&lt/iframe>";
		modalWindow.open();
	};	
	</script>
	<style type="text/css">
	html,body
	{
		margin:0;
		padding:0;
	}
	.modal-overlay
	{
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		height:100%;
		width:100%;
		margin:0;
		padding:0;
		background:#fff;
		opacity:.75;
		filter: alpha(opacity=75);
		-moz-opacity: 0.75;
		z-index:101;
	}
	* html .modal-overlay
	{   
		position: absolute;
		height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
	}
	.modal-window
	{
		position:fixed;
		top:50%;
		left:50%;
		margin:0;
		padding:0;
		z-index:102;
	}
	* html .modal-window
	{
		position:absolute;
	}
	.close-window
	{
		position:absolute;
		width:32px;
		height:32px;
		right:8px;
		top:8px;
		background:transparent url('/examples/modal-simple/close-button.png') no-repeat scroll right top;
		text-indent:-99999px;
		overflow:hidden;
		cursor:pointer;
		opacity:.5;
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
	}
	.close-window:hover
	{
		opacity:.99;
		filter: alpha(opacity=99);
		-moz-opacity: 0.99;
	}
	
	</style></head>

Een eindje verderop in de body tags staat dan een verwijzing naar zo'n modal window

Code: 
<td style="width: 353px" class="style1">
										<a href="http://www.fortherestless.com/nrk.html" onclick="openMyModal('http://www.fortherestless.com/nrk.html'); return false;" class="icoMr">
	<img border="0" src="http://www.fortherestless.com/media/norsk.jpg" width="266" height="200"></a></td>

En het bestand met het filmpje nrk.html ziet er zo uit:

Code: 
<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>modal</title>
	<style type="text/css">
	html,body
	{
		margin:0;
		padding:0;
	}
	div
	{
	width: 550px;
	height: 405px;
	color: #fff;
}
	div h1
	{
		top:50%;
		text-align:center;
		position:absolute;
		margin:0 auto;
		width:100%;
	}
	</style>
</head>

<body>
<div align="center"><h1>

<script type="text/javascript" src="http://www.fortherestless.com/embed/swfobject.js"></script>
<div id="flashcontent">
					<div align="left"><strong>This video gallery requires the 
						Flash Plugin (version 8+)</strong><br />

					<br />
						Flash is a free download. - Get it <a href="http://www.adobe.com/go/getflashplayer" target="_blank">
						here</a>.
					</div>
				</div>
			<script type="text/javascript">
			var so = new SWFObject("http://www.fortherestless.com/embed/player.swf", "mediaplayer", "440", "360", "8", "#212121", true);
			// need this next line for local testing, it's optional if your swf is on the same domain as your html page
			so.addParam("allowscriptaccess", "always");
			so.addParam("menu", "false");
			so.addParam('allowfullscreen','true');
			so.addVariable('width','440');
			so.addVariable('height','360');
			so.addVariable('displayheight','360');
			so.addVariable('file','http://www.fortherestless.com/embed/fix.php?videoid=mx7re4AVnHI&fmt=22');
			so.addVariable('type','flv');
			so.addVariable('autoscroll','true');
			so.addVariable('autostart','true');
			so.addVariable('skin', 'http://www.fortherestless.com/embed/stijl.swf');
			so.write("flashcontent");
			</script>
			</div></h1>
</body>
</html>

Alle hulp is welkom want zelf kom ik er helaas niet uit !
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan