Tuesday, April 11th, 2006

DOMInclude: Replacing pop-ups

Category: JavaScript, Library

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â€?.


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

  1. <script type="text/javascript" src="DOMinclude_config.js"></script>
  2. <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.

  1. <a href="saywhat.jpg" class="DOMpop">photo of a confused puppy</a>

Alter the configuration by editing the DOMinclude_config.js file:

  1. DOMinccfg={
  2. // CSS classes
  3. // trigger DOMinclude
  4.   triggerClass:'DOMpop',
  5. // class of the popup
  6.   popupClass:'popup',
  7. // class of the link when the popup
  8. // is open
  9.   openPopupLinkClass:'popuplink',
  10. // text to add to the link when the
  11. // popup is open
  12.   displayPrefix:'Hide ',
  13. // filter to define which files should
  14. // not open in an iframe
  15.   imagetypes:'jpg|JPG|JPEG|jpeg|gif|GIF|png|PNG',
  16. // dimensions of the popup
  17.   frameSize:[320,180]
  18. }

Posted by Dion Almaer at 7:49 am

4.1 rating from 47 votes


Comments feed TrackBack URI

This has been done several times now, but I do like this implementation. Very slick way to confgure the options and I like the unobtrusive adding to the links via a class name. Though I fear the day that malacious ad developers start learning of these libraries.

Comment by Rich Waters — April 11, 2006

[…] Via Ajaxian, descubro DOMinclude, una curiosa aplicación para crear pop-ups dinámicos. […]

Pingback by aNieto2K | Lo que quiero, cuando quiero y como quiero » DOMinclude, popups dinámicos con Ajax — April 11, 2006

Wow, some good copy and paste here. Oh, cheeky, you even hotlinked my images :-)

Rich, I think it is pretty naive of us to think we are ahead of advertisers who really want to bombard you with advertising. I am quite sure they had this idea before me. However, you can use it for good aswell, and I hope people will.

Comment by Chris Heilmann — April 11, 2006

I think all of these neat little scripts need to find their way into some framework like Scriptaculous does with it’s effects. Cool though.

Comment by Brian — April 11, 2006

Brian, I might just do that once I got my book finished. This was actually to be a part of it but then I ditched it as an example as the chapter was already 50 pages :-)

Comment by Chris Heilmann — April 11, 2006

This does not seem to work in Windows IE

Comment by Mitch — April 11, 2006

Works here in IE7 and IE6, and I am behind a brutal proxy server? Can it be you have IFRAME blocking software running?

Comment by Chris Heilmann — April 11, 2006

Works for me in Firefox, Safari, and IE 6, but not IE 5.5 Mac (I doubt it would take much to get it working in it, but I didn’t look closely at the code). Simple and intuitive, though, but I would suggest the ability to set a default size and then allow people to add additional classes to specify the size of the iframe with their own CSS.

Comment by Matthew Ratzloff — April 11, 2006

OK it works now.

I may have been usuing the iframeblock page before.

Comment by Mitch — April 11, 2006

What’s the deal with the iframeblock. Call me ignorant on this one but what’s a big reason to block iframes?

Comment by Brian — April 11, 2006

Brian: the main reason people have to block iFrames is that “popup-vandalists” have been using them for “ages” to bypass normal popup blockers.

More on the subject; that looks like an interesting library, and I believe I’ll need to add it on my “do follow progress on this”-list.

And then totally off the subject; would someone happen to have a pointer or two for me on how to interact with iFrames on Safari (Mac) and Konqueror (Linux)? It appears that the way I’ve done it in the past (var f = window.frames[“foobar”];) doesn’t work on those browsers though it works just great on FF, IE and Opera. Major problem is that I don’t have the said browsers to test with, and am thus forced to relying on customer feedback on the issue, that can be – to say the least – misleading sometimes.

Comment by Markku Uttula — April 11, 2006


Comment by test — April 12, 2006

It works after two, three times in IE6-7, not the first times.
I’m not using anything but clean browsers.
It’s just a bug – fix it.

Comment by Mikael Bergkvist — April 12, 2006

Hmm, first of all, who are you to *order* people to fix things given out for free?
Secondly, can anybody else confirm this? I tried the script on about 20 different computers and settings so far (yes, also different connections) and never had that problem. Could it be that you are the impatient type and you didn’t wait for the image or the documents to load and your connection is slow for some reason? The second and third time indicates that it is a caching issue.

Comment by Chris Heilmann — April 12, 2006

chris : tested on IE5,5.5 & 6 – images/iframes not loading properly on 5, but on 5.5 & 6 all is fine.

Comment by davros — April 12, 2006

Of course, I meant IE 5.3.2 Mac, not 5.5. Not that it matters–you can’t even download it from the Microsoft website anymore. Huzzah.

Comment by Matthew Ratzloff — April 12, 2006

[…] DOMInclude: Replacing pop-ups DOMInclude provides javascript replacement for popup windows. “DOMInclude is a library that allows you to add inline dynamic includes of content rather than using window popups.” The effect is pretty cool. (tags: javascript webdev) […]

Pingback by Jim O’Halloran’s Weblog » Blog Archive » links for 2006-04-12 — April 12, 2006

Let me preface this by saying I’m not a full time programmer, so sorry if I sould like a noob. Can this script be used on a mouse over instead of having to click on the link? Thanks in advance for the help.

Comment by Curtiss — May 4, 2006

Leave a comment

You must be logged in to post a comment.