The modals I have set up for my website open but do not close when I click the X button or outside.
When I run my code in a browser I can click the button and it works. But then it will not close. I am not sure what the error is or why this does not work.
var modal = document.getElementById("WhiteSedan1")
var btn1 = document.getElementById("BtnWhiteSedan")
var span = document.getElementsByClassName("close")[0];
btn1.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: 50x;
/* Location of the box */
left: 0;
top: 0;
width: 50%;
/* 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);
/* 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;
}
<div class="desc">
White Sedan
</div>
<div id="WhiteSedan1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">
Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000
</p>
</div>
</div>
My goal is when I click the X or outside the modal, the modal closes.
I've fixed some problems:
height of the modal, taking the 100% of the space so influencing the click
put a listener on the document, which will trigger the modal if the status is block or if it's the button.
var modal = document.getElementById("WhiteSedan1")
var btn1 = document.getElementById("BtnWhiteSedan")
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
if(btn1.contains(event.target)){
modal.style.display = "block";
}else{
if (!modal.contains(event.target) && modal.style.display === "block" || span.contains(event.target)) {
modal.style.display = "none";
}
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50x;
/* Location of the box */
left: 0;
top: 0;
width: 50%;
overflow: auto;
height: auto;
z-index: 1px;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0);
/* 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;
}
<div class="desc">
White Sedan
</div>
<div id="WhiteSedan1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">
Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000
</p>
</div>
</div>
I’d suggest combining all opening / closing modal event listeners into one, otherwise multiple event listeners run consecutively, but you only want one action to happen.
One way of achieving this behavior is to check for event.target: if the BtnWhiteSedan element is clicked, open the modal; otherwise, if neither the modal nor anything inside the modal is clicked, with the exception of the × button, close the modal. See Node.prototype.contains.
Since event is only used for event.target, use destructuring to get the target property directly.
const modal = document.getElementById("WhiteSedan1"),
openButton = document.getElementById("BtnWhiteSedan"),
[
closeButton
] = document.getElementsByClassName("close");
addEventListener("click", ({target}) => {
if (target === openButton) {
modal.hidden = false;
}
else if(target !== modal && !modal.contains(target) || target === closeButton){
modal.hidden = true;
}
});
.modal {
position: fixed;
z-index: 1;
padding-top: 50px;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="desc">
<a id="BtnWhiteSedan" class="btn btn-outline-primary" href="#">White Sedan</a>
</div>
<div id="WhiteSedan1" class="modal" hidden>
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">Model: Toyota<br> Mileage: 28,000 km<br>Transmission: Auto<br> Cost: $10,000</p>
</div>
</div>
It’s not always robust to check for CSS properties. Use the hidden attribute instead, or use a class name and modal.classList.has("hidden"), modal.classList.add("hidden"), modal.classList.remove("hidden"), with .hidden { display: none; } in your CSS. See Element.prototpye.classList. If you do use the hidden attribute, remove the CSS default, and simply add a hidden attribute to your modal as I’ve done in the code above.
I’ve also replaced var by const, onclick by addEventListener, and abstract equality by strict equality. I’ve also used more semantic variable names (e.g. closeButton rather than span).
There was also a typo in your CSS: padding-top: 50x; instead of padding-top: 50px;.
Related
I want to create a multi-tabs page with an image modal on each tab.
I used code from w3school.com. The modal only shows on the first page but not in the others. No matter what image I click, the modal with that image will show only in the first page. I am new to web design, so I prefer to use CSS and simple JavaScript.
Can anybody help me figure out how to make the modal show on the correct page?
Edited on Oct 02, 2021, I revised my CSS and Javascript and fixed the issue using a loop. Just sharing for anyone might be interested in.
Revised JavaScript
///// Image display modals
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the image and insert it inside the modal - use its "alt"
// text as a caption
var img = document.querySelectorAll("img.myImg")
var modalImg = document.querySelectorAll("img.modal-content")
var captionText = document.querySelectorAll(".modal-caption");
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the image, open the modal
for (var i = 0; i < img.length; i++) {
img[i].onclick = function() {
for (var index in modals) {
modals[index].style.display = "block";
for (var index in modalImg) {
modalImg[index].src = this.src;};
for (var index in captionText) {
captionText[index].innerHTML = this.alt;}
}
}
}
// 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";
}
}
}
Revised CSS
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
.modal-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, .modal-caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
HTML
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_nature.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="News" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="Contact" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
Original CSS
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
Original JavaScript
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
Separate function for each modal will work out now , further you can look into this and loops for small code in the near future
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// Get the 2nd modal
var modal2 = document.getElementById("myModal2");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img2 = document.getElementById("myImg2");
var modalImg2 = document.getElementById("img02");
var captionText2 = document.getElementById("caption2");
img2.onclick = function() {
modal2.style.display = "block";
modalImg2.src = this.src;
captionText2.innerHTML = this.alt;
}
// Get the 2nd <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// Get the 3rd modal
var modal3 = document.getElementById("myModal3");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img3 = document.getElementById("myImg3");
var modalImg3 = document.getElementById("img03");
var captionText3 = document.getElementById("caption3");
img3.onclick = function() {
modal3.style.display = "block";
modalImg3.src = this.src;
captionText3.innerHTML = this.alt;
}
// Get the 2nd <span> element that closes the modal
var span3 = document.getElementsByClassName("close")[2];
// When the user clicks on <span> (x), close the modal
span3.onclick = function() {
modal3.style.display = "none";
}
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {
background-color: red;
}
#News {
background-color: green;
}
#Contact {
background-color: blue;
}
#About {
background-color: orange;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}
/* 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.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
.caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content,
.caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_nature.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption" class="caption"></div>
</div>
</div>
<div id="News" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg2" class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal2" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption2" class="caption"></div>
</div>
</div>
<div id="Contact" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg3" class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal3" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img03">
<div id="caption3" class="caption"></div>
</div>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
I have a search where the results are displayed in a table generated by php on my main page. I want to display the results table in a popup/modal instead of on the page. Search works fine until I put it in the modal and then nothing pops up. I took the modal code from W3 schools. Any assistance or a better way to achieve this is much appreciated.
<div id="myModal" class="modal" name="officese">
<form action="" method="Post">
<label>Office Search:</label><br>
<input type="text" name="search" size="8">
<input id="popup" type="submit" name="submit">
</form>
<div class="modal-content">
<span class="close">×</span>
<?php
include 'testing.php';
$key=$_POST['search'];
if(isset($_POST['submit'])){
$new_search=dir_search($key);
}
?>
</div>
</div>
JS
<script>
var modal = document.getElementById("myModal";
var btn = document.getElementById("popup");
var span = document.getElementByClassName("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";
}
}
</script>
CSS:
.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/Box */
.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 */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
i used a plugin from this website and tailored it to my needs and it is working perfectly.
https://www.jqueryscript.net/lightbox/jQuery-Multi-Purpose-Popup-Modal-Plugin-popModal.html
I have about 4 buttons on my page I am working on that I need to have a modal message pop up before the user can go any further. I have currently set them to getElementById however, since there are multiple elements I can't use ID.
I have tried changing it to ClassName and SelectorAll but I am unsure how to get the other buttons to display the modal and not just the first button only.
Please see Codepen below:
Modal Buttons
<a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<!-- Modal -->
<div id="simpleModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn">×</span>
<h2>Please Read!</h2>
</div>
<div class="modal-body">
<p>Concerning Online Orders:</p>
<p>
Dino's Pizza Company in Blue Mound, TX Online ordering system is for <em>CARRY OUT ONLY</em> at this time.
If you would like to order DELIVERY, please contact the store at 817 232- 2244.
<p>PLEASE NOTE: You are ordering for CARRY OUT at our ONLY location:
1600 GILL STREET
BLUE MOUND, TX 76131
<br>Thank you for your business!
</p>
<a data-glf-cuid="06a81907-5b80-4290-9392-2c3b0b166ca8" data-glf-ruid="d4d87ac8-e97e-4fcf-a1bb-c8611f57c680"><button class="button">Continue to Order</button></a>
</div>
<div class="modal-footer">
</div>
</div>
/* Modal */
.modal-btn:focus {
border: none;
}
.modal-btn {
background: #d30404;
padding: 1em 2em;
color: white;
border: 0;
}
.modal-btn:hover {
background: #333;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0, .5);
}
.modal-content {
background-color: #f4f4f4;
margin: 20% auto;
padding: .5em;
/* width: 400px; */
width: 70%;
box-shadow: 0 5px 8px 0 rgba(0,0,0, .2), 0 7px 20px 0 rgba(0,0,0, .17);
animation-name: modalopen;
animation-duration: 1.75s;
}
#keyframes modalopen {
from{opacity: 0}
to {opacity: 1}
}
.modal-header h2, .modal-footer h3 {
margin: 0;
}
.modal-header {
background: #d30404;
padding: 15px;
color: white;
}
.modal-body {
padding: 10px 20px;
}
.modal-footer {
background: #d30404;
padding: 10px;
color: white;
text-align: center;
}
.closeBtn {
color: #ccc;
float: right;
font-size: 1.875em;
color: white;
}
.closeBtn:hover, .closeBtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.button {
color: white;
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
}
// Modal Button
// Get modal element
const modal = document.getElementById('simpleModal');
// All page modals
var modals = document.querySelectorAll('.modal');
// Get open modal button
const modalBtn = document.getElementById('modalBtn');
// Get close button
const closeBtn = document.getElementsByClassName('closeBtn')[0];
// Listen for OPEN Click
modalBtn.addEventListener('click', openModal);
// Listen for CLOSE Click
closeBtn.addEventListener('click', closeModal);
// Listen for OUTSIDE Click
window.addEventListener('click', outsideClick);
// Function to OPEN modal
function openModal() {
modal.style.display = "block";
}
// Function to CLOSE modal
function closeModal() {
modal.style.display = "none";
}
// Function to CLOSE modal
function outsideClick(e) {
if(e.target == modal) {
modal.style.display = "none";
}
}
First: You should Select all buttons using:
const modalBtn = document.querySelectorAll('.modal-btn');
second: loop throw all of them and add event listener:
modalBtn.forEach(function(e) {
e.addEventListener('click', openModal);
})
See working Example
You can try this
var elements= document.getElementsByClassName("menu-btn")
Array.from(test).forEach(function(element) {
element.addEventListener('click', openModal);
});
Just Try this code .
<script>
const modal = document.getElementById('simpleModal');
// All page modals
var modals = document.querySelectorAll('.modal');
// Get open modal button
const modalBtn = document.getElementsByClassName('modal-btn');
// Get close button
const closeBtn = document.getElementsByClassName('closeBtn')[0];
console.log(modalBtn);
for(var i=0; i < modalBtn.length; i++){
modalBtn[i].addEventListener("click", openModal);
}
// Listen for OPEN Click
//modalBtn.addEventListener('click', openModal);
// Listen for CLOSE Click
closeBtn.addEventListener('click', closeModal);
// Listen for OUTSIDE Click
window.addEventListener('click', outsideClick);
// Function to OPEN modal
function openModal() {
modal.style.display = "block";
}
// Function to CLOSE modal
function closeModal() {
modal.style.display = "none";
}
// Function to CLOSE modal
function outsideClick(e) {
if(e.target == modal) {
modal.style.display = "none";
}
}
</script>
You can pass three different ID s for buttons and then via ID open the model like below
<a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<a id="modalBtn01" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<a id="modalBtn02" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
Change js as below
// Get open modal button
const modalBtn = document.getElementById('modalBtn');
const modalBtn01 = document.getElementById('modalBtn01');
const modalBtn02 = document.getElementById('modalBtn02');
// Listen for OPEN Click
modalBtn.addEventListener('click', openModal);
modalBtn01.addEventListener('click', openModal);
modalBtn02.addEventListener('click', openModal);
// Modal Button
// Get modal element
const modal = document.getElementById('simpleModal');
// All page modals
var modals = document.querySelectorAll('.modal');
// Get open modal button
const modalBtn = document.querySelectorAll('.modal-btn');
// Get close button
const closeBtn = document.getElementsByClassName('closeBtn')[0];
// Listen for OPEN Click
modalBtn.forEach(function(e) {
e.addEventListener('click', openModal);
})
// Listen for CLOSE Click
closeBtn.addEventListener('click', closeModal);
// Listen for OUTSIDE Click
window.addEventListener('click', outsideClick);
// Function to OPEN modal
function openModal() {
modal.style.display = "block";
}
// Function to CLOSE modal
function closeModal() {
modal.style.display = "none";
}
// Function to CLOSE modal
function outsideClick(e) {
if(e.target == modal) {
modal.style.display = "none";
}
}
/* Modal */
.modal-btn:focus {
border: none;
}
.modal-btn {
background: #d30404;
padding: 1em 2em;
color: white;
border: 0;
}
.modal-btn:hover {
background: #333;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0, .5);
}
.modal-content {
background-color: #f4f4f4;
margin: 20% auto;
padding: .5em;
/* width: 400px; */
width: 70%;
box-shadow: 0 5px 8px 0 rgba(0,0,0, .2), 0 7px 20px 0 rgba(0,0,0, .17);
animation-name: modalopen;
animation-duration: 1.75s;
}
#keyframes modalopen {
from{opacity: 0}
to {opacity: 1}
}
.modal-header h2, .modal-footer h3 {
margin: 0;
}
.modal-header {
background: #d30404;
padding: 15px;
color: white;
}
.modal-body {
padding: 10px 20px;
}
.modal-footer {
background: #d30404;
padding: 10px;
color: white;
text-align: center;
}
.closeBtn {
color: #ccc;
float: right;
font-size: 1.875em;
color: white;
}
.closeBtn:hover, .closeBtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.button {
color: white;
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
}
<a id="modalBtn" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<a id="modalBtn01" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<a id="modalBtn02" class="menu-btn header-btn modal-btn">Order CARRYOUT</a>
<!-- Modal -->
<div id="simpleModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn">×</span>
<h2>Please Read!</h2>
</div>
<div class="modal-body">
<p>Concerning Online Orders:</p>
<p>
Dino's Pizza Company in Blue Mound, TX Online ordering system is for <em>CARRY OUT ONLY</em> at this time.
If you would like to order DELIVERY, please contact the store at 817 232- 2244.
<p>PLEASE NOTE: You are ordering for CARRY OUT at our ONLY location:
1600 GILL STREET
BLUE MOUND, TX 76131
<br>Thank you for your business!
</p>
<a data-glf-cuid="06a81907-5b80-4290-9392-2c3b0b166ca8" data-glf-ruid="d4d87ac8-e97e-4fcf-a1bb-c8611f57c680"><button class="button">Continue to Order</button></a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
How can I get this effect below to happen inside the modal? I have tried a bunch of methods and it seems like I am missing something. When I put all of the content in the .wrap div inside the "MODAL CONTENT" div it no longer shows anywhere. Then when I correct the css to target the modal properly #myModal modal-content .wrap {... the content just shows up as images next to each other.. I'm completely lost as to why that is happening? Can someone explain how I can make this work inside the modal pls?
var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 30;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
});
moveBackground();
//////////////////////////////////////////////////MODAL/////////////////////////////////////////////////////////////
// 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";
}
}
body {
height: 100vh;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
color: white;
font-size: 7vmin;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wrap {
background-color: #0F2044;
-webkit-perspective: 100px;
perspective: 100px;
height: 100%;
position: relative;
overflow: hidden;
}
.wrap .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: black;
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>MODAL CONTENT</p>
</div>
</div>
<div class="wrap">
<div class="bg">
<img class="front" src="https://shannels.com/fg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/mg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/bg.svg">
</div>
</div>
</div>
</div>
Move your wrapper inside the modal content then you need to make it position:absolute and make the modal content position:relative then adjust z-index and width/height
var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 30;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
});
moveBackground();
//////////////////////////////////////////////////MODAL/////////////////////////////////////////////////////////////
// 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";
}
}
body {
height: 100vh;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
color: white;
font-size: 7vmin;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wrap {
background-color: #0F2044;
-webkit-perspective: 100px;
perspective: 100px;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
top:0;
left:0;
z-index:-1;
}
.wrap .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: black;
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
position:relative;
/* Could be more or less, depending on screen size */
z-index:0;
color:#fff;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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="wrap">
<div class="bg">
<img class="front" src="https://shannels.com/fg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/mg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/bg.svg">
</div>
</div>
</div>
</div>
<span class="close">×</span>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
</div>
</div>
My guess is that the content is showing up in the modal, but it's getting cropped. Try adding a specific height to .wrap or .modal-content (note 100% won't work because the parent and the absolutely positioned children have no height).
.wrap {
background-color: #0F2044;
-webkit-perspective: 100px;
perspective: 100px;
position: relative;
overflow: hidden;
// Add something like this
height: 50vh;
}
Also, if you were trying to target it with #myModal modal-content .wrap {..., as you said above, you're missing a class selector (.) before modal-content. Should be #myModal .modal-content .wrap {...
This is the code. If I open the modal, the close button will not work and will not close until the page is refreshed.
// 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";
}
}
/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #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 */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button onclick="document.getElementById('myModal').style.display='block'">Sign
Up</button></li>
</ul>
</div>
<!-- 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>
All I want is for the modal to close when the button is clicked.
In your code there is no element with id myBtn
so remove the following code
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
and it will work fine
You didn't gave the button an ID. So the javascript was failing on that line where you were adding an event listener to the button. So the statement that follows were not executed.
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button id="myBtn">Sign Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" style="display:none;" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
// 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";
}
}
Here is the solution : https://jsfiddle.net/xf7whk0o/
Use this in your closing button.
data-dismiss="modal"
Use it like:
<button type="btn btn-default" data-dismiss="modal">CLOSE</button>