How do I make this code close a modal when user clicks outside of the modal window both on iOS and non-touch devices?
I know about some other similar topics here regarding window.onclick and touch devices, but I'm relatively new to JS and I don't know how to properly combine this function (for both platforms).
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";
}
var closeModal = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.addEventListener('click', closeModal);
window.addEventListener('touchend', closeModal);
.modal {
display: none;
position: fixed;
overflow: hidden;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: black;
color: white;
font-size: 100%;
}
.close {
color: white;
float: right;
font-size: 70%;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
}
<div id="myModal" class="modal">
<span class="close">×</span>
<p>Some content here</p>
</div>
Bind touchend and click event to the window element:
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var state = 'closed';
btn.onclick = function() {
modal.style.display = "block";
setTimeout(function() {
state = 'open';
}, 300);
}
span.onclick = function() {
modal.style.display = "none";
}
var closeModal = function(event) {
var closest = event.target.closest('#myModal');
if ((null === closest || 0 < closest.length) && 'open' === state) {
modal.style.display = "none";
state = 'closed';
}
}
window.addEventListener('click', closeModal);
window.addEventListener('touchend', closeModal);
.modal {
display: none;
position: fixed;
overflow: hidden;
left: 0;
bottom: 0;
width: 100%;
height: auto;
background-color: black;
color: white;
font-size: 100%;
}
.close {
color: white;
float: right;
font-size: 70%;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
}
<button id="myBtn">open</button>
<div id="myModal" class="modal">
<span class="close">×</span>
<p>Some content here</p>
</div>
Edit: Updated code snippet.
On that solution i added simple a state to run close method only when state is open. With the closest method we search over all parent of the clicked element if there is a element that is equal to modal.
Only when closest is null or has a length of 0 we will close the modal.
Related
I would like to know how can I display different infromation on the same popup windows?
I'm using this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
I find out to make few same button active I have to edit JavaScript code, convert buttons into classes.
<button class="myBtn">butoon 1</button>
<button class="myBtn">button 2</button>
<button class="myBtn">button 3</button>
JavaScript:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
for (var i = 0; i < btns.length; i++) {
btns[i].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";
}
}
But if I create few same buttons and change information in it I get the same information like in the first popup window. How can I solve this?
Use this code.
It works well for me.
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btns = document.getElementsByClassName("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var modalText = document.getElementById('modal-text');
// When the user clicks the button, open the modal
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(event) {
switch(event.target.innerHTML) {
case "button 1":
modalText.innerHTML = "First button Clicked";
break;
case "button 2":
modalText.innerHTML = "Second button Clicked";
break;
default:
modalText.innerHTML = "Third button Clicked";
}
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";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* 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;
}
<button class="myBtn">button 1</button>
<button class="myBtn">button 2</button>
<button class="myBtn">button 3</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p id="modal-text">Some text in the Modal..</p>
</div>
</div>
How can make any of the li items launch modal when clicked. I'm attempting to log to console when the a is clicked but it does not log to console. All of the code can also be seen at this codepen: https://codepen.io/centem/pen/KKPJQQg
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.querySelectorAll(".a");
// 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";
console.log("item clicked");
}
// 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";
}
}
Your problem is, that you save the collection of all a inside the btn variable. The collection doesn't have an onclick function, so there is no effect, when you click one of the buttons. You have to set the onclick function for each a inside the btn collection. For example:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.querySelectorAll(".a");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
for (let i = 0; i < btn.length; i++) {
btn[i].onclick = function() {
modal.style.display = "block";
console.log("item clicked");
}
}
// 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";
}
}
ul {
list-style-type: 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;
}
<a>some other anchor tag</a>
<ul>
<li><a class="a" href="#">item</a></li>
<li><a class="a" href="#">item</a></li>
<li><a class="a" href="#">item</a></li>
</ul>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
I want users to be able to right click and have the custom contentmenu have two choices:
Contact (with link https://rowurbux.weebly.com/contact.html)
Support (with link https://rowurbux.weebly.com/support.html)
<html>
<head>
<script type="text/javascript">
if (document.addEventListener) { // IE >= 9;other browsers
document.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu"); //here you draw your own menu
e.preventDefault();
}, false);
} else { // IE < 9
document.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}
</script>
</head>
<body> Lorem ipsum... </body>
</html>
Help me out with this please!
Thanks everybody,
Will
A JS or HTML answer is perferrable
Here is simple Context menu in pure javascript
const element = document.getElementById("box1");
const listElement = document.getElementById("list");
const onClickOutside = (event) => {
listElement.style.display = "none";
document.removeEventListener("click", onClickOutside);
};
listElement.addEventListener("contextmenu", (event) => {
event.stopPropagation();
});
listElement.addEventListener("mouseup", (event) => {
event.stopPropagation();
});
document.addEventListener("contextmenu", (event) => {
listElement.style.display = "none";
});
listElement.addEventListener("click", (event) => {
event.stopPropagation();
});
element.addEventListener("mouseup", (event) => {
event.stopPropagation();
if (event.button === 2) {
return;
}
});
element.addEventListener("contextmenu", (event) => {
event.preventDefault();
event.stopPropagation();
document.addEventListener("click", onClickOutside);
const x = event.offsetX;
const y = event.offsetY - 15;
listElement.style.display = "block";
listElement.style.top = y + "px";
listElement.style.left = x + "px";
});
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
.section {
height: 100%;
display: flex;
justify-content: space-between;
}
.box1 {
position: relative;
height: 400px;
width: 400px;
background-color: #e7e7e7;
}
.list {
display: none;
position: absolute;
list-style: none;
background-color: #fff;
width: 100px;
padding: 0;
}
.list li {
padding: 10px;
cursor: pointer;
}
.list li a{
padding: 0;
text-decoration: none;
color: #333;
}
.list li a:hover, .list li:hover a{
text-decoration: none;
color: #fff;
}
.list li:hover {
background-color: #333;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<section class="section">
<div class="left_panel">
<div class="box1" id="box1">
<p>Right Click on anywhere inside place to get links in context menu</p>
<ul class="list" id="list">
<li>Contact</li>
<li>Support</li>
</ul>
</div>
</div>
</section>
</body>
</html>
use that :D
HTML code:
<script >
if (document.addEventListener) { // IE >= 9;other browsers
document.addEventListener('contextmenu', function(e) {
var modal = document.getElementById('myModal');
modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
e.preventDefault();
}, false);
} else { // IE < 9
document.attachEvent('oncontextmenu', function() {
var modal = document.getElementById('myModal');
modal.style.display = "block";
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.event.returnValue = false;
});
}
</script>
<p>custom contentmenu as modal </p>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p> Contact</p>
<p> Support</p>
</div>
</div>
css code:
.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 */
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 {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
I change it for moodal opened after right mouse click xD
good luck xD
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>
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>