This method still uses JavaScript, but it is paired with CSS to produce a less annoying and invasive outcome.

1)      Develop the content that you would normally open in a pop up.

2)      Create a div tag in the “opener” page.  Hide the div tag using the visibility and display properties and specify the position property as “absolute” and set the z-index property to a plane that is greater than 1 and by itself. 

3)      Use the newly created/hidden div as a container and paste the content from step one between the opening and closing tags of the div.

4)      Create a JavaScript function that “unhides” the div – unleashing all of the content you created. Once the div is “turned on” the div breaks away from the content around it and it “floats” to the plane that you specified with the z-index.   The example below is a javascript toggle function that will turn the div off or on depending on which state it currently is in. 

function div_toggle(id){               

var imagediv = document.getElementById(id);

if (imagediv.style.display==”none”){
        imagediv.style.display=”block”;
        imagediv.style.visibilty=”visible”;                             
}
else{
imagediv.style.display=”none”;
imagediv.style.visibilty=”hidden”;

}

}

Play around with different CSS positioning techniques to give you your desired affect. 

To see a live working example, go to our portfolio page and click on a thumbnail of any of the websites.

If you are interested and seeing more detailed instructions, send us an email.

Filed under: 129 Tips, Coding by admin