Show Drupal Content Inside a Pop-up Window

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.

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
21 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Agustín José Jiménez Chacón
Agustín José Jiménez Chacón
8 years ago

Thanks a lot for this article!!!!Most of all for the “Posible Improvements”…I already knew the previous steps but I needed to hide popup´s type of content from the seach results!

steve
steve
8 years ago

@agustnjosjimnezchacn great. Glad it was helpful 🙂

Agustín José Jiménez Chacón
Agustín José Jiménez Chacón
8 years ago
Reply to  steve

I receive all your training reports in my mail box since a little time but today I decided to log in and leave a comment because I think OSTraining is a wonderful and necessary guide for all Drupal beginners as me.There is a module for everything!…Thanks for show us the way!

steve
steve
8 years ago

@agustnjosjimnezchacn You’re welcome. Thanks for the kind words

Rotsen
Rotsen
7 years ago

How hard would it be to do a disclaimer not for a link but for a specific Drupal 8 page?

daniel-pickering
7 years ago
Reply to  Rotsen

Hi Rotsen,
Make the disclaimer as a popup and have it load via blocks and have the block set to only load on the page that you want the disclaimer to appear on.
Thanks,

Daniel

Toby Beavers
Toby Beavers
7 years ago

Hi thanks for this discussion…is it possible to use the Colorbox popup for Locked Content on a site

daniel-pickering
7 years ago
Reply to  Toby Beavers

Hi Toby,
Yes it should be possible.
Daniel

Richie Nabuk
Richie Nabuk
7 years ago

How do i load a modal or pop up on page load pls?

I see most site will display subscribe to newsletter block or cookies info on a pop-up immediately after page load or scroll to a particular height.

How do i implement this on drupal 8?
I anticipate your response.
Thanks

daniel-pickering
7 years ago
Reply to  Richie Nabuk

Hi Richie,
Most of those functions are attached to the mail modules. Have a look at mailchimp and you will probably find it has an option you can enable for it.
Daniel

Richie Nabuk
Richie Nabuk
7 years ago

Pardon me, my second comment isn’t related but i don’t know where to channel the question pls.

the comment i made earlier which i still anticipate response, i posted as a guest and it displayed immediately.

How did you configure disqus plugin to display guest comment immediately without moderation?

daniel-pickering
7 years ago
Reply to  Richie Nabuk

Hi Richie,
In Disqus itself configuration.
Daniel

Diana Rojas
Diana Rojas
6 years ago

Does it work with drupal 8? The Colorbox node module is not enabled for drupal 8?

danielpickering
6 years ago
Reply to  Diana Rojas

Hi Diana,
It should work fine with Drupal 8. You shouldn’t need the node module.
Thanks

Daniel

Cas
Cas
6 years ago

If you use CKeditor it is even easier: Input the text for the link, click the link icon and click the Advanced tab. Type colorbox-node in the Stylesheet-class box. Don’t forget to link to the desired node in the first tab just like you normally do. And that’s it: clicking the link will open the node in a Colorbox frame.

Arvid Kuipers
Arvid Kuipers
6 years ago
Reply to  Cas

There is no advanced tab in the link button in my drupal environment. It only shows a text filed for the url, nothing else. Do I need to enable something to get more options there?

Arvid Kuipers
Arvid Kuipers
6 years ago

hi Steve, in Drupal 8, is there anythin special you need to do before seeing those extra features?

Ameer Khan
Ameer Khan
6 years ago

For drupal 8 users, Check this module https://www.drupal.org/project/simple_popup_blocks.

Description: Turn any blocks, forms or anything with CSS selectors into popup.

Arvid Kuipers
Arvid Kuipers
6 years ago
Reply to  Ameer Khan

Thank you Ameer 🙂

Abhilash
Abhilash
6 years ago

colorbox node is not there for drupal8 and also i’m not seeing those two check boxes in color box settings.

markus
markus
4 years ago

when i use this way the whole website (header, nav, content (the view i need), footer) appears in the modal window, but i want only a view displayed in it – what do i do wrong?

21
0
Would love your thoughts, please comment.x
()
x