Popup Display

A div is used to create a display to contain a text message, the display is shown when a calling element is clicked, this element can be a link, div, or span.

The calling element is placed in the page where you want the display to be shown, the first click of the calling element shows the display and the text of the calling element is changed to show "Close Display" so the user knows that a second click will hide the display.

If more than one calling element is used the display can be populated with a new message by passing the message to the function as a parameter in the function call.

The display does not have to be closed by the same link, if a second link is clicked while the display is showing the previously clicked links text will revert back to its original. You can also click in the display box to close it.

There are two options for positioning the display:

  1. Relative position
    The display is positioned relative to the calling element, calling elements further down the page bring the display down to where they are.

  2. Fixed position
    The display is shown in a fixed position within the window and remains fixed in the window when the page is scrolled.

You can set this option by setting the value of variable displayFixed to 0 (zero) for relative positioning and 1 for a fixed position.

You can make adjustments to the final position of the display by changing the values of variables offsetX and offsetY to suit.

My example is using displayFixed=0 for a relative positioning.

Example Link









Example Div










Example Span









Display Fixed









TheText 









<script type="text/javascript">
// Jeff
// www.huntingground.freeserve.co.uk

offsetX=250
offsetY=100
displayFixed=1 // 0 = position relative, 1 = position fixed

lastObj=null
linkText=null
currentObj=null

function showDiv(obj,txt){
currentObj=obj

displayDiv=document.getElementById("display")

if(currentObj!=lastObj){

if(lastObj!=null){
lastObj.innerHTML=linkText
}

linkText=currentObj.innerHTML

displayDiv.style.left=offsetX

if(displayFixed==0){
displayDiv.style.top=currentObj.offsetTop+offsetY // show in relation to calling object position
}
else{
displayDiv.style.top=document.body.scrollTop+offsetY // show in same position within window
}

displayDiv.innerHTML=txt
displayDiv.style.display = "block"

lastObj=currentObj
currentObj.innerHTML="Close Display"
}
else{
displayDiv.style.display = "none"
lastObj=null
currentObj.innerHTML=linkText
}

}

function stayput(){
if(!currentObj){
return
}

if(displayFixed==1){

if (document.layers) {
document.layers['display'].pageX = window.pageXOffset + offsetX
document.layers['display'].pageY = window.pageYOffset + offsetY
}

if (document.all) {
document.all['display'].style.posLeft = document.body.scrollLeft + offsetX
document.all['display'].style.posTop = document.body.scrollTop + offsetY
}

if(document.getElementById){
displayDiv.style.left = document.body.scrollLeft + offsetX
displayDiv.style.top = document.body.scrollTop + offsetY
}

}

}

onscroll=stayput

function HideDiv(){ //  if display is clicked
displayDiv.style.display = "none"
lastObj=null
currentObj.innerHTML=linkText
}

</script>

<div id="display" style="position:absolute;width:350px;display:none" onclick="HideDiv()"></div>

<a href="#null" onclick="showDiv(this,'This example uses a link')">Example Link</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div onclick="showDiv(this,'This example uses a div')">Example Div</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<span onclick="showDiv(this,'This example uses a span')">Example Span</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>