I have the colorbox module installed so I assume there's a way to do this with it, but I've had no success. Pretty much what I'd like to do within the WYSIWYG editor is have a link to an external website open up in a colorbox modal. I have forms hosted on a third party website, so instead of having users leave my site, I'd like the ability to have them just see that external form in the colorbox.

How do I achieve such a thing? I've tried adding the colorbox-node class to no success and also tried creating my own class and then in a custom js file have the following code:

    $(".custom-class").colorbox({iframe:true, width:"80%", height:"80%"});

The above code fails when I inspect it with the following error: TypeError: $(...).colorbox is not a function.

I'm also using a bootstrap sub-theme but I don't think the modal component would be of any use, would it?


You just need to make sure the library is added to the request.

For example, to include the library on every page:

function THEME_page_attachments_alter(array &$attachments) {
  $attachments['#attached']['library'][] = 'colorbox/colorbox';
  • Thank you! This allows me to add the colorbox library to load on every page but it seems to load the library after my active.js file so it doesn't recognize my .colorbox function. Is there a way of sorting the order of how the js files are loaded? – ACanadianCoder Aug 30 '18 at 15:19
  • Let define add colorbox library in dependencies of your library. So colorbox library will loaded before your library load. – MrD Aug 30 '18 at 16:32
  • @MrD can you elaborate on what you mean/how to do this? – ACanadianCoder Aug 30 '18 at 17:14
  • 1
    Nevermind, I get what you mean. Adding it as a dependency to the libraries.yml file adds it before my custom js. Thank you. – ACanadianCoder Aug 30 '18 at 17:48

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.