Show Drupal Content Inside a Pop-up Window

| Drupal
Show Drupal Content Inside a Pop-up Window

One OSTraining member wanted to create a series of disclaimers for external links.

They wanted a text disclaimer to appear inside a pop-up after a visitor clicked a link.

In this tutorial, I'm going to show you how to make that happen ...

  • Install Colorbox as explained in our Colorbox tutorial.
  • Install the Colorbox Node module.
  • Go to Configuration > Colorbox and choose your settings. Make sure the first two boxes are checked:
Drupal colorbox admin settings

I'm going to use two content types her:

  • "Article" will contain the information with external links.
  • "Disclaimer" will contain the disclaimers!
Content types for use with colorbox pop-ups

First, I set up the disclaimer. This is going to be a very basic warning message.

One thing to note: after saving this disclaimer, be sure to record the URL.

Creating content to put inside a colorbox pop-up

Now I create the Article. Here's an example of the content in the image below. I use class="colorbox-node" to create the pop-up. I can also set the height and width using width=500&height=500.

Creating a colorbox pop-up link

The next image shows the end result of the content above:

A link that will show a Colorbox pop-up

And if I click the link, I will see Drupal content inside a pop-up box:

A colorbox pop-up window in action

Possible improvements

In the pop-up shown above, the "Disclaimer" title is clickable. You can hide it using the Exclude Node Title module.

if you use the approach shown above, you may want to stop the disclaimers from appearing in your site's search results. You can use the Search Restrict module. Use a module like Node noindex to hide it from Google search results.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.