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:
I’m going to use two content types her:
- “Article” will contain the information with external links.
- “Disclaimer” will contain the disclaimers!
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.
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.
The next image shows the end result of the content above:
And if I click the link, I will see Drupal content inside a pop-up box:
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.
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!
@agustnjosjimnezchacn great. Glad it was helpful 🙂
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!
@agustnjosjimnezchacn You’re welcome. Thanks for the kind words
How hard would it be to do a disclaimer not for a link but for a specific Drupal 8 page?
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
Hi thanks for this discussion…is it possible to use the Colorbox popup for Locked Content on a site
Hi Toby,
Yes it should be possible.
Daniel
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
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
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?
Hi Richie,
In Disqus itself configuration.
Daniel
Does it work with drupal 8? The Colorbox node module is not enabled for drupal 8?
Hi Diana,
It should work fine with Drupal 8. You shouldn’t need the node module.
Thanks
Daniel
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.
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?
hi Steve, in Drupal 8, is there anythin special you need to do before seeing those extra features?
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.
Thank you Ameer 🙂
colorbox node is not there for drupal8 and also i’m not seeing those two check boxes in color box settings.
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?