After following this tutorial, I was able to create a pop-up box with a contact form. However, I am looking for a way to reuse this code in multiple locations without having to change the IDs for each button.
If anyone has any advice on how to achieve this, please let me know. I'm open to suggestions and willing to provide more information if needed.
You can visit my site here. I have added the ID to both slider links.
Below is the code snippet for my pop-up box and button:
<button id="myBtn" class="btn btn-light">
click here
</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<?php echo do_shortcode('[wpforms id="439"]'); ?>
</div>
This is the JavaScript I am using:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// 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 the 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";
}
}