Christian Heilmann

Replace Pop-Ups with dynamic includes using DOMinclude (updated)

Thursday, May 25th, 2006 at 1:15 pm

Update 25/05/06: DOMinclude now supports only one include window at a time and closing include windows from external files.

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”.

One solution is to use JavaScript to create a new layer with the content of the document when JavaScript is available and simply link to the page when it isn’t.

DOMnclude is a script that does that for you

Following is an example what it does to a normal link when you add a certain CSS class. Enjoy, and kiss those pop-ups good-bye.

Update: Would people who have IFRAMES blocked please test the version that checks for blocked iframes? You should be sent to the page instead of trying to load the page into the layer when you click the “Amber Spyglass” link in the demo page. Please comment below if it works then I will include the fix.

DOMinclude example

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

Dev Digest 146: 🥱 React fatigue 📊 Query anything with SQL 🧠 AI News

Why it may not be needed to learn React, why Deepfake masks will be a big problem and your spirit animal in body fat! 

Dev Digest 147: Free Copilot! Panel: AI and devs! RTO is bad! Pi plays!

Free Copilot! Experts discuss what AI means for devs. Don't trust containers. Mandated RTO means brain drain. And Pi plays Pokemon!

Dev Digest 148: Behind the scenes of Dev Digest & end of the year reports.

In 50 editions of Dev Digest we gave you 2081 resources. Join us in looking back and learn about all the trends this year.

Dev Digest 149: Wordpress break, VW tracking leak, ChatGPT vs Google.

Slowly starting 2025 we look at ChatGPT vs Google, Copilot vs. Cursor and the state of AI crawlers to replace web search…

Dev Digest 150: Shifting manually to AI.

Manual coding is becoming less of a skill. How can we ensure the quality of generated code? Also, unpacking an APK can get you an AI model.

My other work: