popup css div position - tilpasning af script
HejJeg vil gerne åbne min div med position i forhold til det link, der åbner den (i stedet for midt i vinduet).
Jeg har tilpasset et par script. Det eneste jeg mangler er positionen på den åbnede div.
Jeg har følgende 2 filer:¨
HTML:
<!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>Test</title>
<script type="text/javascript" src="csspopup.js"></script>
<style type="text/css">
<!--
#blanket {
/* background-color:#111;
opacity: 0.65; ====use this to fade background*/
position:absolute;
z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#cccccc;
width:150px;
height:160px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
-moz-box-shadow: 2px 2px 2px #dedede; /* Firefox */
-webkit-box-shadow: 2px 2px 2px #dedede; /* Safari and Chrome */
filter:progid:DXImageTransform.Microsoft.Shadow(color='#dedede',direction='120',strength='2')
}
-->
</style>
</head>
<body>
<br /><br /><br /><br /><br />
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" onclick="document.forms['test'].test2.value='Hej';popup('popUpDiv');return false;">Skriv Hej i feltet</a>
</div>
<form name="test" action="test.php" method="post">
<input type="text" name="test2">
</form>
<a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
</body>
</html>
===================
java script:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150;//150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
Nogen, der kan hjælpe?
/Plaf
