Open Lightbox Content Via Beaver Builder Button

First off… I just got this and I have to say I’m SUPER impressed. Great job on this. :slight_smile:

Here’s my issue.

I’m trying to create a button within Beaver Builder that will trigger content in a lightbox.

Specifically… The button says “Get a Quote!”. When the user clicks that button, I want a form to open in a lightbox.

I know how to do it via HTML code. I specifically want to trigger it via the Beaver Builder button so I don’t have to hand-code button styles.

I own FooBox so I can use that if necessary. Any suggestions for how to make this happen?

Alright… I found an ultra-janky work-around. Basically I use an image for the button and load it in via an HTML module. This lets me specify target=“foobox” in the anchor tag.

Here’s a small change that would make BB a TON more flexible for future versions…

Let me set a custom target other than “same window” and “new window” for links and buttons. That way I can load whatever content I want through my third-party lightbox plugin.

…Unless I’m missing something. Is there a better way?

Hey Matthew,

Welcome to the BB forums! :slight_smile:

I’m glad you’re loving the plugin! I don’t really think the guys are going to be implementing such feature but feel free to head over to our user voice forums if you want to add a request for that.

So the only thing you want is to be able to add an additional target for your foobox. I think we can do that via JS. The code below should be able to do it. You’ll want to assign a class to your button first so it doesn’t apply to all anchor tags. In this example, the class used is request-a-quote.

jQuery(document).ready(function() {
  jQuery('.request-a-quote a').attr('target', 'foobox');
});

If you’re using the BB theme, you can simply place this under Theme Customizer > Code > JS Code.

Hope this helps!

Ben

First off, thanks for the prompt response! I really appreciate it. I’m using the BB theme. :slight_smile:

Changing the target via JavaScript after the fact doesn’t work. That was the first thing I tried too. I wrote some similar code (non jQuery) that essentially did the same thing.

Instead of opening in FooBox, it causes it to open in a new window. This happens with both the code above and my own…

The only thing I can figure is that the FooBox plugin is scanning the page for links targeting it and inserting JavaScript based on what it finds. If that’s the case, changing the target after page load is too late.

I’m not necessarily bent on using FooBox. Do you have any suggestions for getting my “get a quote” form to load in a lightbox using BB?

Hey Matthew,

That makes sense! Sorry but BB seems to not have that option. You might want to make a feature request about it though, a Modal Popup module. :slight_smile:

Ben