Monday, February 2, 2009

Popup div using javascript

-----------style------------------------------
#backgroundFilter
{
position: absolute;
top: 0;
left: 0;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #000;
filter: alpha(opacity=70);
opacity: 0.17;
display: none;
z-index: 1000100;
width: 100%;
height: 100%;
}
/* POPUP WINDOW */
#popupWindow
{
position: absolute;
width: 383px;
height: 300px;
padding: 1px;
z-index: 1000300;
display: none;
background-color: #ddd;
border: 1px solid black;
}
#topLeft
{
width:357px;
float:left;
}
#topRight
{
width:23px;
float:left;
}
#popupBody
{
width:380px;
margin: 30px 0 0 0;
}
-------------------script--------------------------------------
if (!document.all)
document.captureEvents(Event.MOUSEMOVE)

// On the move of the mouse, it will call the function getPosition
document.onmousemove = getPosition;

// These varibles will be used to store the position of the mouse
var X = 0
var Y = 0

// This is the function that will set the position in the above varibles
function getPosition(args)
{
// Gets IE browser position
if (document.all)
{
X = event.clientX + document.body.scrollLeft
Y = event.clientY + document.body.scrollTop
}

// Gets position for other browsers
else
{
X = args.pageX
Y = args.pageY
}
}
function backgroundFilter()
{
var div;

if(document.getElementById)
// Standard way to get element
div = document.getElementById('backgroundFilter');
else if(document.all)
// Get the element in old IE's
div = document.all['backgroundFilter'];

// if the style.display value is blank we try to check it out here
if(div.style.display==''&&div.offsetWidth!=undefined&&div.offsetHeight!=undefined)
{
div.style.display = (div.offsetWidth!=0&&div.offsetHeight!=0)?'block':'none';
}

// If the background is hidden ('none') then it will display it ('block').
// If the background is displayed ('block') then it will hide it ('none').
div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';
}

function popUp()
{
var div;

if(document.getElementById)
// Standard way to get element
div = document.getElementById('popupWindow');
else if(document.all)
// Get the element in old IE's
div = document.all['popupWindow'];

// if the style.display value is blank we try to check it out here
if(div.style.display==''&&div.offsetWidth!=undefined&&div.offsetHeight!=undefined)
{
div.style.display = (div.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
}

// If the PopUp is hidden ('none') then it will display it ('block').
// If the PopUp is displayed ('block') then it will hide it ('none').
div.style.display = (div.style.display==''||div.style.display=='block')?'none':'block';

// Off-sets the X position by 15px
X = X + 15;

// Sets the position of the DIV
div.style.left = X+'px';
div.style.top = Y+'px';
}


----------HTML----------------
<div id="popupWindow" style="display:none">
<div id="topLeft">
<img alt="View Links" height='23' width='357' src='images/title.gif' />
</div>
<div id="topRight">
<a href='javascript:popUp();backgroundFilter();'>
<img height='23' width='23' src='images/close.gif' alt='Close' /></a>
</div>
<div id="popupBody">
<ul>
<li><a href="http://www.blacksoulstrangers.info">Black Soul Strangers</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
<li><a href="http://www.stephendaly.info">Stephen Daly</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>
</div>
</div>

No comments: