Hello everyone!
Currently, I am working on coding a simple JS modal that can be opened and closed smoothly. The issue I am facing is related to adding a click function to (.black-overlay) in order to fade out everything and close the modal.
<div class="black-overlay"></div>
<div id="play-button">
<a id="video-click" href="#">
<img src="img/home/video-play.png" alt="Check out our video">
</a>
</div>
<div id="welcome-video">
<iframe class="vimeo-video" src="//player.vimeo.com/video/83267186?autoplay=1" width="722" height="406" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><!--#welcome-video-->
Here is the JavaScript code I have implemented:
$("#video-click").click(function(event) {
event.preventDefault();
$('#video-click').hide();
$('#welcome-video').show();
$('.panel2 .black-overlay').fadeIn();
});
var iframe = $('.vimeo-video')[0],
player = $f(iframe);
$('.panel2 .black-overlay').click(function(event){
event.preventDefault();
$('.panel2 .black-overlay').fadeOut();
$('#welcome-video').fadeOut();
$('#video-click').fadeIn();
var video = $('iframe').attr("src");
$('iframe.vimeo-video').attr("src","");
$('iframe.vimeo-video').attr("src",video);
$('iframe.vimeo-video').attr('src','//player.vimeo.com/video/83267186?autoplay=1');
});
I believed that this implementation would work to close the modal, but I have tried various methods and even disabled other JavaScript on my website.
If you would like to see the issue in action, you can check out the live preview of the site. The problematic part is the second panel with a play button in the middle. Here is the link:
I would greatly appreciate any assistance as I've been struggling with this for quite some time. Wishing everyone a fantastic weekend!