How to load a iframe only on button click - javascript

I want a youtube video Iframe only when "Watch Video" Button is clicked. Currently the video iframe loads in the background, when the page loads.
Note: I do not mean, play the video on button click. I mean, load the iframe on button click
https://jsfiddle.net/kz0xxe22/
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
var trailerbox = document.getElementById("close");
trailerbox.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";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

You can change the src attribute to a data-src, then when you click the button, set src to data-src
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
var trailer = document.getElementById('trailervideo');
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
trailer.setAttribute('src', trailer.getAttribute('data-src'));
}
var trailerbox = document.getElementById("close");
trailerbox.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";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="trailervideo" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

Simplest thing to do is add the src attribute when clicking the "Watch Trailer" button! :)
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
//Add "src" attribute by getting the video and setting it with setAttribute.
document.getElementsByClassName('trailervideo')[0].setAttribute('src', 'https://www.youtube.com/embed/TDwJDRbSYbw');
}
var trailerbox = document.getElementById("close");
trailerbox.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";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color:#f2f2f2;
color:red;
font-weight:600;
border: none; /* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color:#e2e2e2;
cursor:pointer;
}
#trailerdivbox {
display:none;
width: 100%;
height:100%;
position:fixed;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width:560px;
max-height:315px;
width: 95%;
height: 95%;
left:0;
right:0;
margin:auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox" >
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

Related

Display button after modal is closed

I have a 'play' button which opens up a modal with an embedded video. After the user closes the modal, I want to display a button saying 'claim' after 6 seconds.
HTML:
<a id="video-popup"><img src="images/playbutton.png"></a>
<div id="modal_video" class="modal">
<div class="modal-content">
<span class="close">×</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="claim" class="claim">Claim</button></div>
CSS:
.modal_video {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #ffffff;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
font-family: 'Rubik', sans-serif;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.claim {
display: none;
}
.modal-content iframe{
margin: 0 auto;
display: block;
}
Javascript:
function showClaimButton() {
var x = document.getElementById("claim");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
var v_modal = document.getElementById('modal_video');
var v_btn = document.getElementById('video-popup');
v_btn.onclick = function() {
v_modal.style.display = "block";
}
span.onclick = function() {
v_modal.style.display = "none";
setTimeout(showClaimButton(), 6000);
}
window.onclick = function(event) {
if(event.target == v_modal) {
v_modal.style.display = "none";
}
}
Everything is functional up until I close the video modal; the 'claim' button does not appear.
I have tried abandoning the timeout and just executing the function normally, but it still does not work. I have no idea what the issue is so I don't know what else to try.
I believe your issue stems from the fact that it has CSS over-riding it as it still as the className attached which styles as display:none, try just removing the className when you want to show it and add it back when you want to hide it:
//Remove class to show
document.getElementById("claim").classList.remove("claim");
//Add class to hide
document.getElementById("claim").classList.add("claim");
So you would change your function like so:
function showClaimButton() {
var x = document.getElementById("claim");
if (x.classList.contains("claim");) {
//Remove class to show
x.classList.remove("claim");
} else {
//Add class to hide
x.classList.add("claim");
}
}
Notice you have this in your CSS:
.claim {
display: none;
}

I cant get two HTML modals to show with CSS, JavaScript, and PHP

I am having trouble trying to get two different modals to show with two different buttons. On my actual website the buttons just show the incorrect modal but when I put it into an standalone HTML document we see the result is much different. One of the modals is showing on the screen before anyone hits a button and the second one shows with both button presses
Here is my standalone HTML Code
Any help is much appreciated, even a comment could help. I have about 3 hours into this problem ftr.
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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 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";
}
}
</script>
</html>
</script>
</html>
So far what I see is that you had the class 'modal' written as 'modalL' on one of your modals. You've also got some other names done incorrectly - please check my revised example.
// Get the modal
var modalL = document.getElementById('myModalL');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementById("close");
var spanL = document.getElementById("closeL");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks the button, open the modal
btnL.onclick = function() {
modalL.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
spanL.onclick = function() {
modalL.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";
}
}
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<html>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modal">
<div class="modal-content">
<span id="closeL" class="close">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
</script>
</html>
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body onload="myFunction()">
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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 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";
}
}
function myFunction() {
document.getElementById("myModalL").style.display = 'none';
}
</script>
</html>
</script>
</html>

Opening an external website in a modal popup

I know that Click here opens the link in a new tab (default behaviour in Chrome and Firefox) and that
<a href="http://www.example.com" onclick="window.open('http://www.example.com',
'newwindow', 'width=700,height=500'); return false;">Click here</a>
opens it in a new window.
But how to open an external page in a modal popup (centered on screen, rest of the original page "darkened")?
Is there a nice way to do it?
I tried the following code, but it doesn't seem to be working (click: popup opens, reclick, it closes, reclick on link: it doesn't open anymore. Also the iframe doesn't load).
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
setTimeout(function() {
document.getElementById('page').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
}
}, 100);
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
</div>
Based on Sphinx's great answer, here is what I'll use to create a modal popup displaying an external website in a iframe with a dark background for the rest of the page when the popup is open:
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me<br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
The root cause is page.onclick is registered after popup window is open at the first time, then the following 'open popup' will trigger a.onclick and page.onclick in a row, that caused the popup window is open then is closed directly.
The simple solution is add one parameter to control the state of the popup. if the popup is closed, do nothing in page.onclick.
To remove setTimeout, there are two solution:
added another parameter to control the state of the popup initialization.
Don't make <div id="page"> is the parent of <a id="popup">, so <a id="popup"> will not be triggered when clicked <div id="page">.
Below are two solutions:
I prefer the Solution2, it is better decoupling than
Solution1, every component foucs on its own jobs.
Solution 1: added isInit as the indicator if the popup already finished initialization.
PS: In the comment, you mentioned close the popup only when click on <div id="page">, to implement this in solution1, I think you have to bind the event =mouseout, mouseenter to judge where the mouse clicks.
document.getElementById("a").onclick = function(e) {
e.preventDefault();
var isInit = true; // indicates if the popup already been initialized.
var isClosed = false; // indicates the state of the popup
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById('page').onclick = function() {
if(isInit){isInit=false;return;}
if(isClosed){return;} //if the popup is closed, do nothing.
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
isClosed=true;
}
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
</div>
Solution 2: make <div id="page"> and <a id="popup"> is cousin not parent relations.
document.getElementById("popup").showpopup = function() {
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById("page").style.display = "block";
}
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").showpopup();
}
document.getElementById('page').onclick = function() {
if(document.getElementById("popup").style.display == "block") {
document.getElementById("popup").style.display = "none";
document.getElementById("page").style.display = "none";
document.getElementById('page').className = "";
}
};
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
#page {
display: none;
width: 100%; height: 100%;
top:0px; left:0px;
z-index: 9;
padding: 2em;
position: absolute;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
Click me<br>
Hello<br>
Hello<br>
<div id="page">
</div>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
document.getElementById("a").onclick = function(e) {
e.preventDefault();
var isInit = true; // indicates if the popup already been initialized.
var isClosed = false; // indicates the state of the popup
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById('page').onclick = function() {
if(isInit){isInit=false;return;}
if(isClosed){return;} //if the popup is closed, do nothing.
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
isClosed=true;
}
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"> height=“200”</iframe>
</div>
</div>

Reset all buttons inner.text and background.color with Reset button

I'm trying to reset all the buttons inner.text back to original value (1,2,3) and background.color back to grey with a reset button.
I think something wrong with the for loop because when i place i=0 i < 3, it works. I need it to be btns.length, because i will be adding more buttons later.
What i did wrong with the "YES" button code ?
// Get the Reset that opens the ResetModal
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset');
rst.onclick = function() {
reset.style.display = "block";
}
//Hit "NO" to turn off modal window
var rstno = document.getElementById('resetno');
rstno.onclick = function() {
reset.style.display = "none";
}
// Hit "YES" to reset all button to initial value
var rstyes = document.getElementById('resetyes');
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
for (var i = 0; i < btns.length; i++) {
rstyes.onclick = function() {
var btn = document.getElementById("b"+i);
btn.innerText=i;
btn.style.background="#D3D3D3";
reset.style.display = "none";
}
}
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
reset.style.display = "none";
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
// target value
var TV = document.getElementById('inputtarget');
// Each button click => open modal
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function() {
TV.setAttribute('startbtn', this.id );
modal.style.display = "block";
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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() {
if (event.target == modal) {
modal.style.display = "none";
}
}
//Arithematic Operator Control
function checkValue(){
var inputvalue = document.getElementById('modal');
var buttonsubmit = document.getElementById( TV.getAttribute('startbtn') );
var value = parseInt(inputvalue.value);
var targetValue = parseInt(TV.value);
if (value < targetValue){
buttonsubmit.style.background = 'red' ;
buttonsubmit.innerText = value ;
}
else if (value >= targetValue){
buttonsubmit.style.background = 'green';
buttonsubmit.innerText = value ;
}
else{
buttonsubmit.style.background = '';
buttonsubmit.innerText = ''
}
modal.style.display = "none" ;
return false;
}
#b1,
#b2,
#b3 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 50px;
font-family: Arial;
font-weight: bold;
box-shadow: 0 1px #999;
}
#b30,
#b31 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 25px;
font-family: Arial;
font-weight: bold;
font-size: 0.5rem;
box-shadow: 0 1px #999;
}
#inputtarget {
height: 60px;
width: 100px;
font-size: 1.5rem;
text-align: center;
border: 1;
}
#trigger {
height: 0 auto;
width: 100px;
font-size: 0.5rem;
text-align: center;
}
#b1:hover,
#b2:hover,
#b3:hover {
background-color: grey;
}
#b1:active,
#b2:active,
#b3:active {
background-color: silver;
box-shadow: 1px #666;
transform: translateY(2px);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#modal1 {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Reset (background) */
.reset {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Reset Content/Box */
.reset-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#resetyes,
#resetno {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close1 {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close1:hover,
.close1:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div>
<!-- All Buttons in Matrix Form Production -->
<button id="b1" style="position:absolute; left:30px; top:100px">1</button>
<button id="b2" style="position:absolute; left:80px; top:100px">2</button>
<button id="b3" style="position:absolute; left:130px; top:100px">3</button>
<input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:160px"><br>
<input id="reset" type=button value=Reset style="position:absolute; left:170px; top: 180px">
<input id="trigger" type=button value="Change Target Value" onclick="return CheckBVWithTV()" style="position:absolute; left:165px; top: 530px">
</div>
<!-- The Modal Box 1-->
<div id="myModal" class="modal" >
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>PLEASE INPUT QUANTITY</p>
<input id="modal" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px><br>
<br>
<button id="submit" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
</div>
</div>
<!-- The Reset Box -->
<div id="ResetModal" class="reset">
<!-- Reset content -->
<div class="reset-content">
<span class="close1">×</span>
<p>Are you sure ? <br> This Action cannot be undone.</p>
<input id=resetyes type="button" value="YES">
<input id=resetno type="button" value="NO">
</div>
</div>
You need to move your for loop inside your rstyes.onclick function. You only have one reset yes button, therefore you would not need 3 click functions for that one button. Then in your for loop start from 1 and set it to end at btns.length + 1 since your btns array index starts at 0 and your buttons ids start at 1.
// Get the Reset that opens the ResetModal
var reset = document.getElementById('ResetModal');
var rst = document.getElementById('reset');
rst.onclick = function() {
reset.style.display = "block";
}
//Hit "NO" to turn off modal window
var rstno = document.getElementById('resetno');
rstno.onclick = function() {
reset.style.display = "none";
}
// Hit "YES" to reset all button to initial value
var rstyes = document.getElementById('resetyes');
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
rstyes.onclick = function() {
for (var i = 1; i < btns.length + 1; i++) {
var btn = document.getElementById("b" + i);
btn.innerText = i;
btn.style.background = "#D3D3D3";
reset.style.display = "none";
}
};
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close1")[0];
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
reset.style.display = "none";
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.querySelectorAll('button:not([id=reset]):not([id=submit])');
// target value
var TV = document.getElementById('inputtarget');
// Each button click => open modal
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
TV.setAttribute('startbtn', this.id);
modal.style.display = "block";
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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() {
if (event.target == modal) {
modal.style.display = "none";
}
}
//Arithematic Operator Control
function checkValue() {
var inputvalue = document.getElementById('modal');
var buttonsubmit = document.getElementById(TV.getAttribute('startbtn'));
var value = parseInt(inputvalue.value);
var targetValue = parseInt(TV.value);
if (value < targetValue) {
buttonsubmit.style.background = 'red';
buttonsubmit.innerText = value;
} else if (value >= targetValue) {
buttonsubmit.style.background = 'green';
buttonsubmit.innerText = value;
} else {
buttonsubmit.style.background = '';
buttonsubmit.innerText = ''
}
modal.style.display = "none";
return false;
}
#b1,
#b2,
#b3 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 50px;
font-family: Arial;
font-weight: bold;
box-shadow: 0 1px #999;
}
#b30,
#b31 {
background-color: rgb(211, 211, 211);
height: 50px;
width: 25px;
font-family: Arial;
font-weight: bold;
font-size: 0.5rem;
box-shadow: 0 1px #999;
}
#inputtarget {
height: 60px;
width: 100px;
font-size: 1.5rem;
text-align: center;
border: 1;
}
#trigger {
height: 0 auto;
width: 100px;
font-size: 0.5rem;
text-align: center;
}
#b1:hover,
#b2:hover,
#b3:hover {
background-color: grey;
}
#b1:active,
#b2:active,
#b3:active {
background-color: silver;
box-shadow: 1px #666;
transform: translateY(2px);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#modal1 {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Reset (background) */
.reset {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Reset Content/Box */
.reset-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 240px;
height: 200px;
}
#resetyes,
#resetno {
height: 70px;
width: 100px;
text-align: center;
}
/* The Close Button */
.close1 {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close1:hover,
.close1:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div>
<!-- All Buttons in Matrix Form Production -->
<button id="b1" style="position:absolute; left:30px; top:100px">1</button>
<button id="b2" style="position:absolute; left:80px; top:100px">2</button>
<button id="b3" style="position:absolute; left:130px; top:100px">3</button>
<input id="inputtarget" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:55px; top:160px">
<br>
<input id="reset" type=button value=Reset style="position:absolute; left:170px; top: 180px">
<input id="trigger" type=button value="Change Target Value" onclick="return CheckBVWithTV()" style="position:absolute; left:165px; top: 530px">
</div>
<!-- The Modal Box 1-->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>PLEASE INPUT QUANTITY</p>
<input id="modal" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px>
<br>
<br>
<button id="submit" class=submit_on_enter onclick="return checkValue()">SUBMIT</button>
</div>
</div>
<!-- The Reset Box -->
<div id="ResetModal" class="reset">
<!-- Reset content -->
<div class="reset-content">
<span class="close1">×</span>
<p>Are you sure ?
<br> This Action cannot be undone.</p>
<input id=resetyes type="button" value="YES">
<input id=resetno type="button" value="NO">
</div>
</div>
Mark,
Length begins at 1, and the loop you are using begins at zero. you either need to modify the use of i in your loop or begin the button IDs at b0. The way your html and js is currently written, the loop does nothing during the first iteration. I would recommend changing the ids to begin at b0 and use the updated for loop above.
If you change the button IDs to begin at zero, you should be able to keep using the condition i < btns.length in the loop.
Happy programming!

Insert YouTube Video into a popup

I have a problem to put youtube video in a popup.
Problem is to insert that. I can't do it with only <iframe>. It isn't showing video :(. I put <iframe> into a div and it isn't working. I will show you my scripts, css styles and html.
I want to make something like you click on the popup and in this popup is YouTube video shown.
HTML
<div id="popupBox_1">
<div class="popupBoxWrapper">
<div class="popupBoxContent">
<h3>Popup 1</h3>
<embed width="420" height="315" src="https://www.youtube.com/watch?v=LRblJyq_4Ko">
</div>
</div>
</div>
I tried also method using and it isn't also working :(.
JavaScript
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
window.onclick = function(event) {
if (event.target == popupBox_1) {
popupBox_1.style.display = "none";
}
if (event.target == popupBox_2) {
popupBox_2.style.display = "none";
}
if (event.target == popupBox_3) {
popupBox_3.style.display = "none";
}
if (event.target == popupBox_4) {
popupBox_4.style.display = "none";
}
if (event.target == popupBox_5) {
popupBox_5.style.display = "none";
}
if (event.target == popupBox_6) {
popupBox_6.style.display = "none";
}
if (event.target == popupBox_7) {
popupBox_7.style.display = "none";
}
if (event.target == popupBox_8) {
popupBox_8.style.display = "none";
}
if (event.target == popupBox_9) {
popupBox_9.style.display = "none";
}
}
CSS
#popupBox_1 {
top: 0; left: 0; position: fixed; width: 100%; height: 120%;
background-color: rgba(0,0,0,0.7); display: none; border-radius: 10px !important;}
check it out :
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<iframe src="https://www.youtube.com/embed/LRblJyq_4Ko" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Your algorithm to make a modal was not fine !
To include an youtube video to your codes, you should use <ifream>

Categories