1

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 '16 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 – Patoshi パトシ Sep 22 '16 at 20:31
  • Are you using WYSIWYG module with CKEditor plugin, or standalone CKEditor module? – Елин Й. Sep 22 '16 at 20:47
  • stand alone ckeditor – Patoshi パトシ Sep 22 '16 at 21:18
  • Drupal version 7 or 8? – Kevin Sep 22 '16 at 21:36
1

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

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

End-result
enter image description here

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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