Say goodbye to pop-ups with DOMinclude

Will swallowed hard and said, "All right. I’ll show you how to close a window. But I’ll have to open one first, and make another Spectre. I never knew about them, or else I’d have been more careful."

Phillip Pullman: The Amber Spyglass

You can download DOMinclude and these demo pages to use them in your own pages.
A detailed explanation of how DOMinclude works will be part of my upcoming book Beginning JavaScript with DOM Scripting and Ajax published by Apress later this year.
You are welcome to drop a comment on the blog
And of course to Digg this or add it to deli.cio.us

Pop-Up windows are a pain in the lower back to use. Years of abuse by advertisers, malicious attackers and phishing attempts have conditioned users to close them immediately or turn on their third party pop-up blocking tool or the browser option to do the same.

Yes, there is a difference between unsolicited pop-ups and pop-ups that are necessary for the web site to work. Or is there?

The main reason clients give us when they ask for pop-ups is that they "don't want the users to leave the page" and this is not reason enough to use a new browser instance.

With today's scripting techniques you can keep the user on the site and avoid pop-ups. Just try it on this photo of a confused puppy or even a document containing Terms and Conditions.

DOMinclude is a script that creates this effect: If JavaScript is available the linked file gets shown in a new layer - if it is an image just as the image, if not inside an IFRAME. DOMinclude automatically positions the popup where the original link is and adds a text prefix to the original link telling the user how to hide the layer again.

How to use DOMinclude?

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

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

Add a class called DOMpop to each link you want to turn into a popup like the ones shown here.
```
<a href="saywhat.jpg" class="DOMpop">
photo of a confused puppy</a>
```

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]
}

Enjoy