Show button once modal has been closed

Question

Show button once modal has been closed

I have a 'start' button that triggers a modal window with an embedded video. Once the user closes the modal, I want to show a 'redeem' button after a delay of 6 seconds.

HTML:

<a id="video-start" onclick="openVideoModal()"><img src="images/playbutton.png"></a>
<div id="modal_video" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/O_GQbO7Tthg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>

<button id="redeem" class="claim hide">Redeem</button></div>

CSS:

.modal_video {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}

.modal-content {
background-color: #ffffff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
font-family: 'Rubik', sans-serif;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.claim {
display: none;
}

.modal-content iframe{
 margin: 0 auto;
 display: block;
 }

Javascript:

function openVideoModal() {
document.getElementById('modal_video').style.display = "block";
}

function showRedeemButton() {
var redeemBtn = document.getElementById("redeem");
if (redeemBtn.classList.contains("hide")) {
redeemBtn.classList.remove("hide");
} else {
redeemBtn.classList.add("hide");
}
}

document.querySelector(".close").onclick = function() {
document.getElementById('modal_video').style.display = "none";
setTimeout(showRedeemButton, 6000);
};

window.onclick = function(event) {
if(event.target == document.getElementById('modal_video')) {
document.getElementById('modal_video').style.display = "none";
showRedeemButton();
}
}

The functionality works until I close the video modal; the 'redeem' button does not appear.

I've attempted removing the timeout and directly calling the function, but it still doesn't show up. I'm unsure of what's causing this issue, so I'm at a loss for other solutions to try.

javascript html css modal-dialog bootstrap-modal

Answer 1

Answer №1

It seems like your problem arises from CSS overriding it due to the presence of the className which styles it as display:none. To resolve this, simply remove the className when you want to display it, and add it back when you want to hide it:

//Remove class to display
document.getElementById("claim").classList.remove("claim");

//Add class to hide
document.getElementById("claim").classList.add("claim");

To adjust your function accordingly:

function showClaimButton() {
     var x = document.getElementById("claim");
     if (x.classList.contains("claim");) {
           //Remove class to display
           x.classList.remove("claim");
     } else {
           //Add class to hide
           x.classList.add("claim");
     }
}

Note that in your CSS, there is:

.claim {
   display: none;
}

Answer 2

It seems like your problem arises from CSS overriding it due to the presence of the className which styles it as display:none. To resolve this, simply remove the className when you want to display it, and add it back when you want to hide it:

//Remove class to display
document.getElementById("claim").classList.remove("claim");

//Add class to hide
document.getElementById("claim").classList.add("claim");

To adjust your function accordingly:

function showClaimButton() {
     var x = document.getElementById("claim");
     if (x.classList.contains("claim");) {
           //Remove class to display
           x.classList.remove("claim");
     } else {
           //Add class to hide
           x.classList.add("claim");
     }
}

Note that in your CSS, there is:

.claim {
   display: none;
}

Show button once modal has been closed

Answer №1

Similar questions

Challenges with Selenium Web Scraping

When running the command "npx create-next-app@latest --ts," be aware that there are 3 high severity vulnerabilities present. One of the vulnerabilities is that "node-fetch

Is it possible to include a scroll bar at the top of an overflow-x <div> in addition to or instead of the bottom?

Guide to utilizing Bootstrap v4 SCSS edition in a Bower project

Transitioning images while hovering over a different element

What is the best way to retrieve the results of an indexedDb request beyond the limitations of its callback function?

Fade out a component in Material UI/React by setting a timeout in the parent's useEffect hook for when it unmounts

Objects of equal nature combine and sift through

Using TypeScript to define callback functions within the Cordova.exec method

Attempting to toggle the visibility of div elements based on radio button selections

Tips for transferring the ngRepeat "template" to an ngDirective with transclude functionality

How can I allow users to select multiple files with just one input?

The jQuery newsfeed is powered by the $.each() method

What is the best way to parse a JSON file and create a dynamic webpage using jQuery with the data from the

Achieving vertical alignment and stretching of subchild within a flexbox element

Is there a way to modify the state of my spans by utilizing onMouseHover functionality?

Issue with jQuery's addClass() function not functioning properly on Internet Explorer versions 8, 9, and possibly others as well

Using socket.io and express for real-time communication with WebSockets

Text that appears when you hover over specific locations within one image

Hide and reveal images on hover by using multiple images or links on a single webpage