Popup Alternatives

The use of popup blockers creates a problem for developers who need to put up supporting information on a page. So they need an alternative. A styled layer has been the popular workaround, but it is a lot of work. Not just writing the code'; it means bring the code for the popup into the main pages; a non-starter if it has to be dynamic. An alternative method is to use inline frames. That way the pages are already set up or generated for the popups and the original structure of the page does not need much additional work. They just get loaded into the iframes, and the script gets modified.

The trick is getting them to be dynamic and that what this code does:

Try it: popup1 popup2 popup3

1. The layers to hold the popups are declared like:
   
   <div id="div1" class="popup"></div> <div id="div2" class="popup"></div> <div id="div3" class="popup"></div>
   The popup class can apply any styling but must include position:absolute
   Total control of the look size and position are all controlled by CSS and what controls are available are simply controlled from the HTML generated in script.


2. The script contains two functions. One to format and launch the Iframe and one to close it:
   
   <script type="text/javascript"> function putIF(hldr,x,y,w,h,url) // description of the arguments below { holder=document.getElementById(hldr); //wrap around div holder.style.display='block'; // the div gets styled holder.style.left=x; holder.style.top=y; holder.style.width=w; IF=document.createElement('iframe'); // iframe is created in the DOM IF.setAttribute('height', h); // simple DOM methods IF.setAttribute('width', w); IF.setAttribute("src", url); holder.appendChild(IF); // now we add it to the div holder.innerHTML+='<button onclick="closeIF(this.parentNode)">Close</button>'; // final step is to put in additional controls } function closeIF(obj) // the close is simple we just clear out the div { obj.innerHTML=''; obj.style.display='none'; } </script>


3. Now a link (as I have used) or any event can fire the popup by calling:
   putIF('div1','110px','10px','200px','200px','panel1.html')
   
   The arguments for the function are:
   
   
   • hldr the div layer to hold, position and size the iframe
   • x the left position of the popup including a valid unit for positioning
   • y the top position of the popup including a valid unit for positioning
   • w the width of the popup including a valid unit for dimensions
   • h the height of the popup including a valid unit for dimensions
   • url The name of the page or page generation script that will populate the popup

There you have it. A simple replacement. Most of the code structure, dimension values, layouts, and source pages already exist. It is just a matter of a little code to do the transition to a more user friendly, accessible, and spider friendly format; and you don't have to give up the required functionality. Of course if you are one of those jerks who keeps sticking popups with ads in my face, I will have to deal with that in another article that will deal with how to defeat your efforts without impairing the legitimate use of popups. (Hint: Ever hear of a Firefox extension called Adblock? and a blacklist of marketing morons?).

Search ERT on the Tools Page