For this, you have to use the style attributes and
z-index attributes of HTML objects. Also, to
automatically hide a popup after some time, you can
use "window.setTimeout" ....
Given below is a sample html code:
Just have a look at the style attribute of "popup_div"
and also the function "autoHidePopupAfter".
Hope this helps.
-Venkatesh
HTML
---------
<html>
<head>
<title>Test script showing a popup</title>
<script>
function isDomObjDisplayed(domObj){
if (domObj != null) {
return(domObj.style.display != 'none');
}
return(false);
}
function showDomObj(domObj){
domObj.style.display='';
}
function hideDomObj(domObj){
domObj.style.display='none';
}
function findPosX(obj) {
var curleft = -1;
if (obj != null) {
curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
}
return curleft;
}
function findPosY(obj) {
var curtop = -1;
if (obj != null) {
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
}
return curtop;
}
function showPopup(popupX, popupY, popupObj) {
if (popupObj != null) {
popupObj.style.top = popupY;
popupObj.style.left = popupX;
showDomObj(popupObj);
}
}
function hidePopup(popupObj){
if (popupObj != null) {
hideDomObj(popupObj);
}
}
function showHidePopupBelow(titleId, popupId){
var titleDomObj = document.getElementById(titleId);
if (titleDomObj != null) {
var popupX = findPosX(titleDomObj);
var popupY = findPosY(titleDomObj) +
titleDomObj.offsetHeight;
var popupObj = document.getElementById(popupId);
if (!isDomObjDisplayed(popupObj)) {
showPopup(popupX, popupY, popupObj);
} else {
hidePopup(popupObj);
}
}
}
function autoHidePopupAfter(popupId, time){
var popupObj = document.getElementById(popupId);
if (isDomObjDisplayed(popupObj)){
window.setTimeout(("hidePopupWithId('" + popupId +
"')"), time);
}
}
function hidePopupWithId(popupId) {
var popupObj = document.getElementById(popupId);
hidePopup(popupObj);
}
function setSelectedPopupItem(spanId, selectedItemText){
var span = document.getElementById(spanId);
if (span != null) {
span.innerHTML = selectedItemText;
}
}
</script>
</head>
<body>
<div><span><b>Previously selected value: </b></span><span
id="prevSelection"></span>
<a href="javascript
:showHidePopupBelow('popup_title_d iv'
,
'popup_div');autoHidePopupAfter('popup_div', 5000);">
<div id="popup_title_div" onclick="">
Popup...
</div>
</a>
<div>More text....</div>
<div id="popup_div" style="border: 1px; border-style: solid;
position: absolute; top: 100px; left:
200px;display: none;
z-index: 1; background-color: white;">
<table style="width: 75px;">
<tr>
<td>
<div
onclick="javascript
:setSelectedPopupItem('prevSele ction', 'Item
1');hidePopupWithId('popup_div');">
Item 1
</div>
</td>
</tr>
<tr>
<td>
<div
onclick="javascript
:setSelectedPopupItem('prevSele ction', 'Item
2');hidePopupWithId('popup_div');">
Item 2
</div>
</td>
</tr>
<tr>
<td>
<div
onclick="javascript
:setSelectedPopupItem('prevSele ction', 'Item
3');hidePopupWithId('popup_div');">
Item 3
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
