My client isn't too technical and cannot code, but she wants a popup dialog when the user clicks on a link to show a snippet of html or text.

What solutions are there for the end user to be able to add and edit text popups like this using only a wysiwyg editor without having to code in stuff?

  • Can you provide an example?
    – Kevin
    Sep 22, 2016 at 20:11
  • clicks a link on the content and it pops up like this: prntscr.com/cl6sbl -- but done using the editor without having to code anything Sep 22, 2016 at 20:31
  • Are you using WYSIWYG module with CKEditor plugin, or standalone CKEditor module?
    – Elin Y.
    Sep 22, 2016 at 20:47
  • stand alone ckeditor Sep 22, 2016 at 21:18
  • Drupal version 7 or 8?
    – Kevin
    Sep 22, 2016 at 21:36

2 Answers 2


Since I do not know of a single module that can achieve that functionality out of the box, here is how I'd do it:

  1. Create a new content-type with an entity reference, a trigger string and a dialog text area.
  2. In the referenced node, query for any referencing entities from the new content type. Most likely with a preprocess function and preferably in a newly created custom module.
  3. Load referencing entities if found and attach a JS file that will receive the triggers and dialogue values through the settings array.
  4. If all is well then JS file will have triggers in selectors and dialogues to display.

Here is a recipe for that:

  • CKEditor Link: Used for linking to other content in your Drupal. In this case, I would create another Content-Type, e.g. Popup Snippet or sth similar. This is an optional component, depending on your exact requirements.
  • Colorbox Node: Used for presenting node content in a popup, stripped of the surrounding regions and other theme elements. It also provides an easy way to turn links into popups, by providing a 'magic' class, colorbox-node. This is the main component, and the main idea, allowing the user to 'popify' links by adding a class name to the link's properties in CKEditor.

Below are some screenshot of the result on a D7.

Linking to content
enter image description here

Setting the colorbox-node class
enter image description here

enter image description here

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.