What is the best way to hide the jQuery modal I created?

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!

Answer №1

It seems there is a mistake in the code:

player = $f(iframe);

It should be corrected to:

player = $(iframe);

An error message

Uncaught ReferenceError: $f is not defined
is being displayed on line 10 of vimeoModal.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rejuvenating a template generated on the server in AngularJS

I have a specific partial which is a report - simply a static list of names and dates designed for viewing and printing purposes. For efficiency reasons, the report is rendered server-side, so when a report request is made, my API responds with HTML rathe ...

What is the best way to implement dynamic generation of Form::date() in Laravel 8?

Is there a way to dynamically generate the Form::date() based on the selection of 1? If 1 is selected, then display the Form::date() under the Form::select(). However, if 0 is selected, then hide the Form::date() in this particular view. For example: Sel ...

MUI: Set the height of the div element to dynamically expand based on its content

I am currently working on styling a React app with MUI and I need help figuring out how to make a div's height adjust to its content. Specifically, I have a Card component that contains a Button. Upon clicking the Button, the content below the Card ge ...

Is there a way to retrieve localStorage setItem after an hour has passed?

When the user clicks on the close icon, the notification screen disappears. How can I display the same screen to the user again after an hour? Please provide guidance. const [hideLearningMaterialClosed, setHideLearningMaterialClosed] = useState(false) ...

Retrieving Information from JSON Dataset

Having trouble retrieving data from this Json Data source: No errors are being displayed, but the requested data is not showing up. The issue lies in the response received from the API being an object instead of an array. What should be used to replace th ...

The method of utilizing React with Redux to display component properties

I am currently trying to include my common component in my main.js file Successfully implemented this However, when attempting to print my Redux data values in the common component, I created a method called handleClickForRedux to handle this task. Even af ...

Troubleshooting a problem with dynamic options in Materialize select set

I'm currently facing an issue with my two dependent dropdowns, country and state. When I select a country, I use JavaScript to populate the respective states in the state dropdown. However, even though the options are added correctly when I inspect th ...

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

``In a WordPress plugin, a SELECT query for the database (utilizing WordPress, PHP, and MySQL) is

When trying to fetch records from a select query within a plugin, I encounter an issue where no records are returned and I receive the following error message in the web console. Can someone help me identify what mistake I might be making?: Object { rea ...

USDC to ETH Swap on Uniswap

Every time I try to swap USDC for ETH using Uniswap and Ethers, I keep encountering errors. async function swapUsdcToEth(amount, walletAddress) { const usdc = await Fetcher.fetchTokenData(chainId, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'); ...

Warning in Google Script editor

Currently, I am working on creating some quick scripts to manipulate spreadsheets in my Google Drive. However, I am cautious about the script unintentionally running and making changes to data before I am ready or executing multiple times after completing ...

Creating a dropdown menu with jQuery

I need assistance in creating a <select> list using jQuery. This is my current attempt: $('<select />') .attr('name', 'location') .val("Location 1") .appendTo(this); Despite setting the value to .val( ...

Is it possible to ensure that a newly created element functions in the same way as an existing element?

I am currently in the process of developing an application that empowers users to generate new items, modify existing items, or delete items by utilizing corresponding icons located adjacent to each item. When it comes to existing items, the action icon d ...

Creating a sticky navigation bar in a CSS Grid layout

Using a grid for the first time and attempting to make the nav-bar sticky, I initially used: position: sticky; top: 0; without any success. Subsequently, trying: position: fixed; resulted in undesired consequences. Desiring the nav-bar ...

Tips for Saving JSON Response from Fetch API into a JavaScript Object

I am facing an issue trying to store a Fetch API JSON as a JavaScript object in order to use it elsewhere. The console.log test is successful, however I am unable to access the data. The Following Works: It displays console entries with three to-do items: ...

Erase embedded frame from a Google Sheets document

Is there a way for me to customize the frame and replace it with my own design? Click here to view the Google Sheet embedded frame ...

Internet Explorer causing problems with JQuery

I encountered an error with the following code snippet: jQuery.post('/user/result/generate',{ 'id': getHidden() }, function(html) { $('#result').html(html); }); The error message is: ...

Post request in ExpressJS fails to redirect user after submission

My current project involves developing a web application using NodeJS and ExpressJS. One issue I am encountering is with the login functionality on my website. After filling out the login form, the user's credentials are sent via a post request to the ...

Unconventional appearance of WordPress Jetpack sharing buttons on unique custom theme

Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...

How can I fix the issue with border-radius not displaying correctly in tcpdf and how can I ensure the text is shown on

Currently, I am utilizing tcpdf to showcase a circle and text together in a PDF. Despite my attempts with the code below, the border-radius attribute is not functioning as expected: Upon implementation, I obtained the following result: https://i.sstatic. ...