[Resolved] Link to modal box pop up

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?

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?

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

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 🙂

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