Hello everyone! I need some help again. I'm working on a script that displays an overlay when a menu item is clicked. Within this menu, there is a modal contact form with a close icon or anchor that should appear when clicked. My goal is to have the overlay close automatically when the close button in the contact form is clicked.
The ID for the close button is "closepls". The following JavaScript creates the overlay element and aims to close it when the modal's close button is clicked:
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Close Button -->
<div class="close-modal" id="closepls" data-dismiss="modal">
<p class="cl"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> CLOSE</p>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="col-md-6 conone condits">
<h1> Sample Heading
</div>
<div class="col-md-6 conone">
<?php echo do_shortcode( '[contact-form-7 id="52" title="send"]' ); ?>
</div>
</div>
</div>
</div>
JavaScript Code:
<script>
init=()=>{
document.querySelector('a.menuToggle, a#welcomeDivs').addEventListener('click',modal.overlay.init);
}
modal={
overlay:{
init:()=>{
var overlay = document.createElement('overlay');
overlay.id = 'welcomeDivsss';
overlay.addEventListener('click',modal.overlay.remove);
document.body.appendChild(overlay);
$( "#welcomeDivsss" ).append( '<div class="parela" id="welcomeDiv" <div class="inner_box"> <a onclick="click" class="closes"></a> </div> </div>' );
},
remove:(e)=>{
e.target.parentNode.removeChild(e.target);
document.getElementById('welcomeDivsss').remove();
document.getElementById('closepls').remove();
}
}
}
document.addEventListener('DOMContentLoaded',init);
</script>