I have created a page with a div that when clicked produced a popup modal popup box as per this how to - http://www.w3schools.com/howto/howto_css_modals.asp
The code I have so far is:
JS -
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("drawer1");
// 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";
}
}
CSS -
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
#drawer1 {
position: absolute;
border-style: solid;
border-width: 2px;
border-color: red;
width: 22.5%;
height: 9.5%;
top: 5%;
left: 2%;
}
#drawer2 {
position: absolute;
border-style: solid;
border-width: 2px;
border-color: red;
width: 22.5%;
height: 9.5%;
top: 5%;
left: 26.5%;
}
HTML -
<!-- Trigger/Open The Modal -->
<div id="drawer1"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<div id="drawer2"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Sodjshdjhfjhsdfjhsdjhfjdy</p>
<p>kjbhdfkjbfkjdnbskjfnbdskjbf</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
This works fine for one div but what i really want is to have multiple divs on the page that will each open their own modal box.
Is there a way to do this using this code or am I going to have to look at a different approach?
If you want to have multiple modals then you should create a class the wraps the functionally. In each class you have a reference to the dom element that is displayed and methods to remove and add it from the page.
ie
function modal(title, description, ) {
this.element = //create element
}
modal.prototype = {
destroy and add methods
}
Related
This question already has answers here:
How to make a video play when you open a modal box using JavaScript?
(3 answers)
Closed 2 years ago.
i'm new to html and web development, I am testing a basic page where a button opens a modal and in that modal there's a video.
Can you help me making it autoplay when the modal opens and stop when it closes? I tried a lot op options i found on the web but I can´t get it to work.
I started using w3schools examples.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<style>
body, button {font-family: 'Work Sans', sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 7px; /* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
height: 30px;
background-color: white;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #004F9E;
color: white;
}
div.parent {
text-align: center;
}
ul {
display: inline-block;
text-align: left;
}
button {
background-color: #004F9E; /* Green */
border: 2px solid #004F9E;
border-radius: 5px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
button {
transition-duration: 0.4s;
}
button:hover {
background-color: white;
color: black;
border: 2px solid #004F9E;
}
myBtn {
display: flex;
justify-content: center;
border: none;
}
</style>
</head>
<body>
<h2 style='text-align:center'>Titulo</h2>
<div class="parent">
<ul>
<li>order1.</li>
<li>order2.</li>
<li>orde3.</li>
</ul>
</div>
<!-- Trigger/Open The Modal -->
<div class="parent">
<button id="myBtn">Ver Video</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close">×</span>
<div style='text-align:center'>
<video width="100%"; height="95%" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
</div>
<script>
// Get the modal
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>
</body>
</html>
You can use play() and pause()
document.getElementById('myVideo').play(); // <-- PLAY
document.getElementById('myVideo').pause(); // <-- PAUSE
In the example, I have commented on the places where I added these new lines
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<style>
body,
button {
font-family: 'Work Sans', sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 7px;
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
height: 30px;
background-color: white;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #004F9E;
color: white;
}
div.parent {
text-align: center;
}
ul {
display: inline-block;
text-align: left;
}
button {
background-color: #004F9E;
/* Green */
border: 2px solid #004F9E;
border-radius: 5px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
button {
transition-duration: 0.4s;
}
button:hover {
background-color: white;
color: black;
border: 2px solid #004F9E;
}
/* #myBtn {
display: flex;
justify-content: center;
border: none;
} */
</style>
</head>
<body>
<h2 style='text-align:center'>Titulo</h2>
<div class="parent">
<ul>
<li>order1.</li>
<li>order2.</li>
<li>orde3.</li>
</ul>
</div>
<!-- Trigger/Open The Modal -->
<div class="parent">
<button id="myBtn">Ver Video</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close">×</span>
<div style='text-align:center'>
<video id="myVideo" width="100%" height="95%" controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
</div>
<script>
// Get the modal
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"
document.getElementById('myVideo').play(); // <-- PLAY
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
document.getElementById('myVideo').pause(); // <-- PAUSE
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById('myVideo').pause(); // <-- PAUSE
}
}
</script>
</body>
</html>
I have created a modal window using html , css and JavaScript codes of which are included in snippets
I have included a second modal window by tapping on text in the body of first window
( In short ,2 modal windows are present )
Now the issue is
Whenever i close the second modal window by tapping on the "x" button/tapping outside of modal window both the modal window gets closed together
I want it to happen one at a time , like when i close the second modal window by tapping on "x"/tapping outside of window , only the second window should get closed and the first window should remain active in background
As far as i know , this would require 2 changes in the JavaScript codes where closure of windows is defined (both present at the bottom) , can someone please adjust it accordingly
Thanks in advance
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
})
#import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
/* The Modal (background) */
.modal {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 0.1875em;
/* 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 {
color: white;
position: relative;
background-color: #171B20;
margin: auto;
padding: 0;
border: 0.0625em solid #888;
width: 97%;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: #F0B823;
float: right;
font-size: 9vw;
font-weight: bold;
position: absolute;
right: 0.25em;
top: -0.25em;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 0.125em 1em;
background-color: #171B20;
color: #F0B823;
}
.modal-body {}
.modal-button {
font-family: 'Quicksand', sans-serif;
background-color: #171B20;
border: none;
color: white;
padding: 0.248em 0.496em;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 7vw;
margin: 0.124em 0.062em;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
width: auto;
}
.modal-button:hover {
background-color: #171B20;
color: #F0B823;
}
.pic {
margin: auto;
display: block;
height: auto;
width: 50vh;
}
.headertext {
font-family: 'Quicksand', sans-serif;
display: block;
text-align: center;
font-size: 6.50vw;
}
.bodytext {
font-size: 3.90vw;
font-family: 'Quicksand', sans-serif;
display: block;
padding: 0.625em 0.9375em;
}
p {
display: block;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
• Click Me
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<p>Open Second Modal Window by clicking Me</p>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<p>Body Text Comes here</p>
</div>
</div>
</div>
</div>
I created an array of all the open modals.
Whenever a new modal is opened, I push its id to the array. Whenever the user wants to close the modal, I close only the modal with the last id and popit out of the array.
let open_modals = [];
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
open_modals.push(modal.id);
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
}
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
}
}
}
}
})
#import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
/* The Modal (background) */
.modal {
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 0.1875em;
/* 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 {
color: white;
position: relative;
background-color: #171B20;
margin: auto;
padding: 0;
border: 0.0625em solid #888;
width: 97%;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.2), 0 0.375em 1.25em 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: #F0B823;
float: right;
font-size: 9vw;
font-weight: bold;
position: absolute;
right: 0.25em;
top: -0.25em;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 0.125em 1em;
background-color: #171B20;
color: #F0B823;
}
.modal-body {}
.modal-button {
font-family: 'Quicksand', sans-serif;
background-color: #171B20;
border: none;
color: white;
padding: 0.248em 0.496em;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 7vw;
margin: 0.124em 0.062em;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
width: auto;
}
.modal-button:hover {
background-color: #171B20;
color: #F0B823;
}
.pic {
margin: auto;
display: block;
height: auto;
width: 50vh;
}
.headertext {
font-family: 'Quicksand', sans-serif;
display: block;
text-align: center;
font-size: 6.50vw;
}
.bodytext {
font-size: 3.90vw;
font-family: 'Quicksand', sans-serif;
display: block;
padding: 0.625em 0.9375em;
}
p {
display: block;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
• Click Me
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<p>Open Second Modal Window by clicking Me</p>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="headertext">
<p>Modal Header</p>
</div>
</div>
<div class="modal-body">
<img class="pic" src="https://drive.google.com/thumbnail?id=108ZLeoIfNkKODfRbLuPWpmXRl0gH9qkD">
<div class="bodytext">
<p>Body Text Comes here</p>
</div>
</div>
</div>
</div>
All the models close when you click the "x" because you loop through them all. I feel like the proper way to do this, is to create an event listener on the parent then close the specific modal.
Replace
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined' && modals[index].id == open_modals[open_modals.length - 1]) {
modals[index].style.display = "none";
open_modals.pop();
}
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
With
var theParent = document.querySelector("#modalParent");
theParent.addEventListener("click", hideModal, false);
function hideModal(e) {
if (e.target !== e.currentTarget && e.target.classList.contains('modal')) {
var clickedItem = e.target.closest("div.modal");
clickedItem.style.display = "none";
}
}
window.onclick = function(e) {hideModal(e)};
The only other requirement is to attach the listener to a parent element, in my case I used #modalParent.
Here is a Fiddle with working example.
I have three buttons(when clicked, the modal shows) with different content inside them (every button has its own content and it's different from the other buttons) and now no matter on which button I click, it shows the same content from the last button I've added. Can anyone explain me how to fix this?
I need this to be done by Monday so quick help would be much appreciated.
<div class="popup1">
<style>
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Sponsors</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Our Sponsors</h2>
</div>
<div class="modal-body">
<ul>
<li>MONG</li>
<li>SCNG</li>
<li>Feel Slovenia</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
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>
</div>
<div class="popup2">
<style>
/* The Modal (background) */
.modal2 {
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-content2 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close2 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close2:hover,
.close2:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header2 {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body2 {padding: 2px 16px;}
.modal-footer2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn2">My Gear</button>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header2">
<span class="close2">×</span>
<h2>My gear</h2>
</div>
<div class="modal-body2">
<ul>
<li>Nikon D3100</li>
<li>Sigma 10-20mm f/4</li>
<li>Nikkor 70-300mm f4-5.6</li>
<li>Nikkor 18-55mm f/3.5</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal2");
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[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>
</div>
<div class="popup3">
<style>
/* The Modal (background) */
.modal3 {
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-content3 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 30%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close3 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close3:hover,
.close3:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header3 {
padding: 2px 16px;
background-color: #5ca6b8;
color: white;
}
.modal-body3 {padding: 2px 16px;}
.modal-footer3 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- Trigger/Open The Modal -->
<button id="myBtn3">My Hobbies</button>
<!-- The Modal -->
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-header3">
<span class="close3">×</span>
<h2>My hobbies</h2>
</div>
<div class="modal-body3">
<ul>
<li>Photography</li>
<li>Videography</li>
<li>Traveling</li>
<li>Racing</li>
</ul>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal3");
// Get the button that opens the modal
var btn = document.getElementById("myBtn3");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close3")[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>
</div>
You are using the same variable modal for all three. So this:
var modal = document.getElementById("myModal");
gets overwritten by this
var modal = document.getElementById("myModal2");
which gets overwritten by this
var modal = document.getElementById("myModal3");
By the time the click callback happens, modal is only referring to the 3rd one, so that's the one you end up showing.
The fact that these are in different script tags does not isolate them. You're declaring these variables at the top level of their scripts (as opposed to in a function for example), and so they are global variables.
I have a modal window(popup) that does not fit on the screen height. It opens by pressing a button. The button may be in different part of webpage. Is there a solution to the modal window opened at the top of the screen(for example top: 100px) by pressing a button?
When I use position fixed, the only way to make scrollY on modal window, but it is not the way I want.
<!DOCTYPE html>
<html>
<head>
<style>
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
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>
</body>
</html>
<change location of box>
I am trying to put a modal on a website I am making that has an embedded PDF.
The pdf shows up really small. I did not write this code from scratch. I found it on another site. Can anyone help?
I'm using the Zurb Foundation framework, FYI.
https://jsfiddle.net/8ryeqfbc/
HTML----
<section class="modal">
<div class="wrap row small-up-1 medium-up-1">
<div class="special column"><h3>Modal</h3>
<!-- Trigger/Open The Modal -->
<button id="myBtn">View Full Menu</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<iframe src="pdf.pdf"></iframe>
</div>
</div>
</div>
</div>
</section>
Javascript ---
<script>
// Get the modal
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 on 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>
CSS-----
* 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: 500px; /* Full width */
height: 500px; /* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 95%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
Style the iframe to have it fill the modal box.
.modal-content iframe {
height: 100%;
width: 100%;
}