[Resolved] Link to modal box pop up

[John]

Hi there,

I was wondering if you can help me with a link to a modal pop up from a hook I have on a site.
If you go to https://www.burdekin.org.au, you will see a love heart donate button on the right – it is fixed position.

Right now it links to a donation form page, but I want it to link to modal pop up: modal-61135d4a21b1a
I have created this using Beaver Builder.

I was able to do this using the shortcode/css class element in the menu for a different pop up:
If you hover over contact < Subscribe, it opens into the modal.

Ideally this would be similar.

This is the code I have on the button now:

<a class="button sticky-button" href="https://www.burdekin.org.au/donations/donation-form/" target="_blank" rel="noopener">   <i class="fa fa-heart"></i>&nbsp; Donate </a>

Any ideas how to make that link to the pop up?

Thanks!
John

[Elvin]

Hi John,

You’ll have to remove the href value of that link and replace it with #.

You then have to write a script that adds an event listener to that button where it triggers opening the modal. 😀

I’m unable to find the modal element to be “pop-up”ed up on the page. Can you point me to it to help you out with the script writeup?

[John]

Hey Elvin,

You then have to write a script that adds an event listener to that button where it triggers opening the modal.

Eeeeek!!!

Here is a link to the page where the pop up resides: https://www.burdekin.org.au/fl-builder-template/pop-up-template/

Does that contain enough info for you to help with such a script?

[Elvin]

Here is a link to the page where the pop up resides: https://www.burdekin.org.au/fl-builder-template/pop-up-template/

Sorry, I meant the modal element that it’s suppose to show.

A modal works like this:

It has 2 parts, the button trigger for it and the actual modal element. (the one that shows up)

I’ll basically apply something like the script shared here – https://www.w3schools.com/howto/howto_css_modals.asp

Which you can actually apply yourself if you have the right class selectors. 😀

[John]

OK – I am not sure how to share that with you, as I do it using Beaver Builder…and if it i not published then I don’t know how to link to it!!

Are you able to extract that a similar modal pop up already on the site?
I could potentially switch it around using the different modal number afterwards.

So if you go to CONTACT in the Nav Menu, Then scroll down to SUBSCRIBE – that opens a very similar MOdal POp UP.
Can you use that and then I can apply different numbers to direct it to the other modal?

[David]

Hi there,

which plugin are you using for the modal pop ups?

[John]

I am using the Beaver Builder Powerpack modules
Am happy to use something else if it works similarily

[Elvin]

I am using the Beaver Builder Powerpack modules
Am happy to use something else if it works similarily

Here’s a good example that’s not dependent on any page builder.

First, we create the button trigger. You can place this anywhere. You can even assign any element as the trigger.

After creating the trigger, we then hook in the actual modal element to the page.

Here’s a sample Hook element adding in a modal – https://share.getcloudapp.com/YEuO8nLg

Once we’ve hooked it into the page, you’ll see an unstyled element hooked in to the bottom of the page.

We’ll have to add the CSS to style the modal.

Here’s a CSS applicable to the modal element involved.
https://share.getcloudapp.com/Apu9NpZ8

After adding the appropriate CSS, the modal element hooked it will disappear, but it’s still within the page.

We just need to add a script that toggles it so it pops up.

Here’s a sample script pointing to the modal we just inserted and the trigger button I made.
https://share.getcloudapp.com/Wnu0wORZ

I’ve hooked it on the footer of the site.

Here’s a sample page of it in action – https://dev-generate-press.pantheonsite.io/simple-modal-demo-for-john/#

Now this idea can be applied even on a modal element created and added in by Beaver Builder. All we need is to make the modal element have “display: none;” as its default state and then modify the script a bit to make it show up when we click the designated trigger button. 🙂

[John]

Hey Elvin,

Wow – thankl you so much for going to such trouble and support – amazing.

I have some questions and issues!

I have tried to add this to the site but ran into a parsing error for the snippet:
I have triple checked is but still it does not work –
I get an ‘e is undefined’ error on line 12

add_action( 'generate_after_header'), function (){?>
<script>
//Get the modal
var modal = document.getElementByID("myModal");
	
//Get the button that opens the modal
var btn = document.getElementById("modal-trigger");
	
//Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";	
}	

//When user clicks on <span> (x), close the modal
span.onclick - function() {
modal.style.display = "none";
}	
	
//When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
	if (event.target == modal){
		modal.style.display = "none";
	}
}	
</script>
<?php});

Also!

If I wanted to use the button I already have which is loading in the generate_after_header hook, am I correct to change the above snippet to
add_action( 'generate_after_header'), function (){?>

And. if I am able to do that,
would this be the html I would use for that Element?

<div id="myModal" class="modal">
	<div class="modal-content">
		<span class="close">&times;</span>
	
<a class="button sticky-button" href="https://www.burdekin.org.au/donations/donation-form/" target="_blank" rel="noopener">   <i class="fa fa-heart"></i>&nbsp; Donate </a>
</div>

Sorry for the questions but I am above my pay grade here 🙂

[Leo]

Hey John,

I feel like we are getting quite a bit of the scope of this forum here.

Have you checked with BB’s support on this since the modal is coming from them?

You might also want to consider hiring a developer through Codeable as suggested at the bottom of this page:
https://generatepress.com/what-support-includes/

Sorry about that!

[John]

Hi Leo,

That’s totally fine and understandable.
Also more than happy to be told that from the beginning of any of my requests!
Don’t want to waste your time.

I will figure it out some other way.
Cheers!
John

[Leo]

We always try to point you in the right direction but just not unable to help with the full solution sometimes 🙂

[Author]

Posts