Creating a Modal Popup Inside an InfoBox
Here's a demo of what we can do with a modal
To the right (or maybe below if you are on a smaller device) is an example of a modal inside an infobox. Clicking anywhere on the infobox will cause the modal to activate and display with an overlay across the screen.
So how did we get the modal to trigger based on clicking the infobox? With the capabilities of BeaverBuilder it's actually quite simple. However, it does require an addon to BeaverBuilder as it is not native. For this demo I use Ultimate Addons for BeaverBuilder, but you could also use PowerPack or one of several other plugins compatible with BeaverBuilder.
The way this is going to work
The trick that is used to trigger the modal is the use of a CSS class or ID. This CSS links two different modules together (the modal module and the infobox module) which enables the modal to be called whenever a click is done on some object associated with the infobox. Here are the basic steps:
- On the infobox module goto the Advanced panel and assign a CSS class (e.g. image-modal)
- On the Link panel, set the link action type.
- On the modal module > Display Settings panel, set the Display Modal on to Custom Class/ID.
- Set the CSS class to be the same as the CSS class you added to the infobox module.
Now, whenever the specified action is taken on the infobox, the target modal should appear.
This is how to call the modal from the full InfoBox
Ok, so the example infobox is repeated to the right (just so you have it handy.) To get this to work is a simple matter of making some settings in the modules. As mentioned before, both UABB and PowerPack have this capability. Although the specific settings might be slightly different, the concept is the same so I'm just going to cover the UABB setup in this example.
In this example we are using two modules: the Infobox and the Modal.
To prepare the modal, set the modal to activate on Custom Class/ID and assign a class name to it. A few notes:
- (UABB only) There is the standard class/ID on the Advanced tab of the modal, and there is a Custom Class/ID on the Display Settings tab. These values are entered different depending on where you enter them. If you are entering them on the Display Settings panel, make sure that you include the "." or "#" to designate CSS class or ID.
- It doesn't matter where on the page the modal module is placed. You can keep it next to the calling module just so you know it is associated, or you can place it anywhere else (e.g. top or bottom of page.)
- You can call the same modal from multiple triggers. For example, you could have a button, infobox, and image all calling the same modal.
To prepare the infobox to create the appearance of the modal on clicking anywhere on the box:
- Set the link type to entire box.
- Put a "#" in the url link. If you don't do this, the box will not be activated for a mouse click and will never call the modal.
- Set the infobox CSS class on the Advanced panel.
This is how to call the modal from an InfoBox Button
Maybe you would rather have the modal called from a button rather than the full infobox. That can be done as demonstrated on the example to the right.
In this example we are using the exact same modal that we used previously, and the same infobox. The only thing that we have done is change the link type from entire box to button, and then set up the proper button parameters.
The things that were done on this infobox to create the appearance of the modal on clicking an icon were:
- Set the link type to button.
- Put a "#" in the url link. If you don't do this, the button will not be activated for a mouse click and will never call the modal.
- Delete the button text.
- Set an icon for the button.
- Set the button CSS class.
- Remove the CSS class from the info box (only needed because we set the infobox class in the previous example.)
Demo of calling a modal from within an InfoBox
Want to see a modal popup? Just click on this info box.