DOMInclude: Replacing pop-ups

DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window popups. Pop-up windows are a pain for both the developer and the users. Often enough a page needs to link to a terms and conditions document and as the client does not want the user to leave […]

DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window popups.

Pop-up windows are a pain for both the developer and the users. Often enough a page needs to link to a terms and conditions document and as the client does not want the user to leave the page you are asked to implement them in a pop-up.

The problem with this are technical and psychological:

  • years of unsolicited pop-up windows have conditioned users to immediately close windows when they open
  • the same reason and security concerns made people install pop-up blocker software and browsers to include pop-up blocking options, and depending on their configuration these may even block your “friendly pop-ups”.

Usage

Simply insert DOMinclude in the head of your document with these two script tags:

<script src="DOMinclude_config.js" type="text/javascript"></script>

<script src="DOMinclude.js" type="text/javascript"></script>
 

Add a class called DOMpop to each link you want to turn into a popup like the ones shown here.

photo of a confused puppy

Alter the configuration by editing the DOMinclude_config.js file:

DOMinccfg={ // CSS classes // trigger DOMinclude triggerClass:'DOMpop', // class of the popup popupClass:'popup', // class of the link when the popup // is open openPopupLinkClass:'popuplink', // text to add to the link when the // popup is open displayPrefix:'Hide ', // filter to define which files should // not open in an iframe imagetypes:'jpg|JPG|JPEG|jpeg|gif|GIF|png|PNG', // dimensions of the popup frameSize:[320,180] }

[Source: ajaxian.com]