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.
Related
What I want
I have a page that you use to shop for cards and I do not want to create like 100 pages for different products so I just want a popup for each tile. But when I assign my id to javascript then I create another rid and just put a comma then that id name after there is no response.
My question is
How do I apply the same javascript to different buttons with the same effect But with different content with minimum code?
My code so far
// Get the modal
var modal = document.getElementById("myModalz");
// Get the button that opens the modal
var btn = document.getElementById("myBtnz");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closez")[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";
}
}
#import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght#400;700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Istok Web", sans-serif;
}
.card {
margin: 0.5%;
display: inline-block;
position: relative;
width: 320px;
height: 480px;
background: #191919;
border-radius: 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #ffce00;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before {
top: -70%;
transform: skewY(390deg);
}
.card::after {
content: "CORSAIR";
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 6em;
color: rgba(0, 0, 0, 0.1);
}
.card .imgBox {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
z-index: 1;
}
.card .imgBox img {
max-width: 100%;
transition: .5s;
}
.card:hover .imgBox img {
max-width: 50%;
}
.card .contentBox {
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
}
.card .contentBox h3 {
font-size: 18px;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.card .contentBox .price {
font-size: 24px;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
.card .contentBox .buy {
position: relative;
top: 100px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #000000;
text-decoration: none;
background-color: #ffce00;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.card:hover .contentBox .buy {
top: 0;
opacity: 1;
}
.mouse {
height: 300px;
width: auto;
}
/* The Modal (background) */
.modalz {
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 */
.modalz-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.closez {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closez:hover,
.closez:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!--zero-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.redd.it%2Fw8f8iuj68tn61.jpg&f=1&nofb=1" alt="Backrooms Pack" class="mouse">
</div>
<div class="contentBox">
<h3>Backrooms Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!--one-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.y50mqCTtnDQNTZL3prMvUgHaJb%26pid%3DApi&f=1" alt="War Pack" class="mouse">
</div>
<div class="contentBox">
<h3>War Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
document.getElementsByClassName("buy") will return a collection of the anchor tags with the class 'buy' that you can then loop over and apply the binding to that event.
Alternatively you could use a <button> tag and then loop over document.getElementsByTagName('button').
So
const elements = document.getElementsByClassName("buy");
[...elements].forEach((element) => {
element.onclick = function(event) {
// Now you've got the event you can use it's target, parent or siblings
// to get some content from the wrapping element, something like this
// (you may need to change this but start with event.target)
const content = event.target.parent.innerHTML();
// Set that content on the modal
const modalContentElement = document.querySelector(".modalz-content p");
modalContentElement.innerHTML(content);
// Then open the modal!
modal.style.display = "block";
}
}
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 simple modal dialog box as shown in the code below, which I will use to add help at certain points of a web form.
I would like to add a sliding animation effect that causes the dialog to slide into the screen when the modal is opening, and slide back out when the modal is closed:
I can't find a solution for what I want to achieve. My modal code currently looks like this:
function openModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.display = "block";
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function closeModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.display = "none";
}
<style>
body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
.modal-content { margin: auto; padding: 20px; width: 80%; }
.close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>
<div id="myModal1" class="modal modal_move">
<div class="modal-content">
<button id="cModal" class="close" onclick="closeModal('myModal1')">×</button>
<p>Some text in the Modal...</p>
</div>
</div>
One approach might be to use the CSS3 transition and transform rules to achieve the required slide in/out animation effect for your modal.
One approach would be to add CSS rules to modal to define default transition and transform behavior, along with an open modifier class that defines the transform of the modal when it's visible:
/* Updated CSS with open selector */
.modal.open {
transform: translateX(0px);
}
.modal {
/* Update CSS with transition and transform rules */
transition: transform 1s linear;
transform: translateX(-100%);
}
Next, you would replace the inline style changes of the display rule, with logic to toggle the open class on your modal element like so:
// Add open class to toggle "open" mode
modal.classList.add('open');
// Remove open class to "hide" modal
modal.classList.remove('open');
These two idea can be combined with you existing code as follows:
function openModal(mod_name) {
var modal = document.getElementById(mod_name);
// Add open class to make visible and trigger animation
modal.classList.add('open');
}
function closeModal(mod_name) {
var modal = document.getElementById(mod_name);
// Remove open class to hide and trigger animation
modal.classList.remove('open');
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: red;
}
/* Updated CSS with open selector */
.modal.open {
transform: translateX(0px);
}
.modal {
/* Update CSS with transition and transform rules */
transition: transform 1s linear;
transform: translateX(-100%);
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.8);
}
.modal-content {
margin: auto;
padding: 20px;
width: 80%;
}
.close {
color: #323232;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #424242;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>
<div id="myModal1" class="modal modal_move">
<div class="modal-content">
<button id="cModal" class="close" onclick="closeModal('myModal1')">×</button>
<p>Some text in the Modal...</p>
</div>
</div>
You can use translate transform for this:
I changed your code like this: https://jsbin.com/qecajijuni/2/edit?html,js,output
<style>
body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
.modal { transition: 1s transform;transform:translate(500px); position:absolute; display: block; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
.modal-content { margin: auto; padding: 20px; width: 80%; }
.close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>
<div id="myModal1" class="modal modal_move">
<div class="modal-content">
<button id="cModal" class="close" onclick="closeModal('myModal1')">×</button>
<p>Some text in the Modal...</p>
</div>
</div>
function openModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.transform = "translate(0)";
window.onclick = function(event) {
if (event.target == modal) {
modal.style.transform = "translate(500px)";
}
}
}
function closeModal(mod_name){
var modal = document.getElementById(mod_name);
modal.style.transform = "translate(500px)";
}
I am very new to javascript and I am trying to use modal boxes for profile information. The website that I am building this on does happen to be a drag and drop interface.
I have gotten it to open all of my modals but it wont always close all of my modals. Please note that the below code is contained within the html area of a drag and drop website. Thus far I have avoided using global java although I am open to that. I just don't want to screw it up. All advice welcome.
Here is my code:
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: #ffffff;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #333192;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px; }
a {
text-decoration: none;
font-size: 22px;
color: black; }
button:hover, a:hover {
background-color: #1b1464; }
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: 12px;
/* 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: #FFFFFF;
margin: auto;
padding: 0px;
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; cursor: pointer; {
color: #000;
text-decoration: none;}
.modal-header {
padding: 12px;
background-color: #333192;
color: F15C22; }
.modal-body {
padding: 12px;}
.modal-footer {
padding: 12px;
background-color: #F15C22;
color: white; }
.container {
position: relative;
width: 100%; }
a:link {
color: #ffffff; }
.image {
position: relative;
width: 100%;
height: auto; }
.image:hover { opacity: .7; }
</style>
<div class="card">
<a id="patricoloBtn"><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" class="image" style="width:100%"></a>
<h2 class="contStyleHeaderSubtitle" style="font-weight: 300;"><font face="Helvetica">Francesca Patricolo</font></h2>
<p class="title" style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">Transportation Planner</p>
<p style="font-family: Arial, Helvetica, sans-serif;"><strong>Portland, Oregon</strong></p>
<div style="font-family: Arial, Helvetica, sans-serif; font-weight: 300; margin: 24px 0px;">
<img src="/resources/Pictures/Site%20Icons/linkedin.png" class="card" alt="Linkedin" title="Linkedin" border="0" width="40" height="40" align="center">
</div>
<p style="font-family: Arial, Helvetica, sans-serif; font-weight: 300;">
Contact
<div class="container">
<div id="patricoloModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3 style="color:#F15C22">Francesca Patricolo</h3>
</div>
<div class="modal-body">
<p><img src="http://blog2.iap2usa.org/wp-content/uploads/2018/08/patricolo_francesca_sq.png" alt="Francesca" style="max-width: 210px; margin: 10px; border-radius: 50%;" align="left"><strong>What field do you work in?</strong></p>
<p>Transportation Planning</p>
<p><strong>What kinds of work do you do?</strong></p>
<p>Long range planning, public policy, regional coordination</p>
<p><strong>How many years have you been doing this work?</strong></p>
<p>10</p>
<p><strong>What's your favorite Core Value and why?</strong></p>
<p>#7: Public participation communicates to participants how their input affected the decision. -A KEY trust-builder! It's not done until we communicate back.</p>
<p><button><font color="#FFFFFF">Contact</font></button></p>
</div>
<div class="modal-footer"></div>
</div>
<script type="text/javascript">
/*** Get the modal***/ var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/ var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/ var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
patricoloBtn.onclick = function() { patricoloModal.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 == patricoloModal) { patricoloModal.style.display = "none"; } }
</script>
Remove Javascript for displaying the Modal, this is not the proper way.
Replace this
<a id="patricoloBtn"><img src="path" alt="Francesca" class="image" style="width:100%"></a>
with
<a data-toggle="modal" data-target="#patricoloModal"><img src="path" alt="Francesca" class="image" style="width:100%"></a>
For adding event listeners to multiple elements you must do the following:
var span = document.getElementsByClassName("close");
span.forEach(span => span.addEventListener("click", closeModal);
So heres the code:
/*** Get the modal***/
var patricoloModal = document.getElementById('patricoloModal');
/*** Get the button that opens the modal ***/
var patricoloBtn = document.getElementById("patricoloBtn");
/*** Get the <span> element that closes the modal***/
var span = document.getElementsByClassName("close");
/*** When the user clicks the button, open the modal***/
span.forEach(span => span.addEventListener("click", closeModal));
/*** When the user clicks on <span> (x), close the modal ***/
function closeModal() {
particoloModal.style.display = "none";
}
/*** When the user clicks anywhere outside of the modal, close it***/
document.body.addEventListener("click", (event)=>{
// IF THE CLICKED TARGET IS NOT EQUAL TO THE PARTICOLO MODEL
if(event.target !== particoloModal) {
particoloModal.style.display = "none";
}
})
Hope this works for you.
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
}