I'm having trouble darkening the background when I open the modal. I found a ton of info on how to do this with bootstrap, but I am looking for a way to do it using javascript. I currently have the modal opening and closing when I want it to, so I just need to implement the backdrop feature.
HTML
<body>
<h1>Modal</h1>
<button id="myBtn" data-toggle="modal fade" data-target="#myModal">Open Modal</button>
<section class="modal hidden" id="myModal">
<span class="close">×</span>
<h2>I am the modal</h2>
<p>hello world</p>
</section>
</body>
CSS
.modal {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
border: solid 2px black;
border-radius: 10px;
padding: 30px;
margin: 20px 0;
background-color: greenyellow;
}
.hidden{
display: none;
}
JS
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Any help or starting points on how to implement the backdrop would be appreciated.
You could have a div with the class modalBackdrop to darken the background. You can have it take up the entire page, and give it a color that has transparency like rgba(0,0,0,0.2). You can replace your HTML with the following to add a modal backdrop div element.
<body>
<h1>Modal</h1>
<button id="myBtn" data-toggle="modal fade" data-target="#myModal">Open Modal</button>
<div class="modalBackdrop hidden"></div>
<section class="modal hidden" id="myModal">
<span class="close">×</span>
<h2>I am the modal</h2>
<p>hello world</p>
</section>
</body>
And add the following styles to your CSS for the modal backdrop
.modalBackdrop{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,0.2);
}
Finally, replace your JS with the following to show and hide the backdrop when needed
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalBackdrop = document.getElementsByClassName("modalBackdrop")[0];
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
modalBackdrop.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
modalBackdrop.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modalBackdrop.style.display = "none";
}
}
Also, making the transparency lower in the CSS will make the background darker when showing the modal.
Related
I am creating a gallery in PHP. Clicking on each thumbnail should open a modal window with the image and other information.
The problem is that it only works with the first thumbnail and not with the others.
this is part of the php code:
while($i !== $nIMG){
$recordIMG = $q->fetch(PDO::FETCH_ASSOC);
echo "<div class='content-img'><img src='". $recordIMG['urljpg'] ."' id='infoIMG'></div>";
$i++;
}
this is the modal window
<div class="modal" id="myModal">
<img class="modal-content" id="img01">
</div>
this is the javascript code
var modal = document.getElementById("myModal");
var img = document.getElementById("infoIMG");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
I am thinking it is an ID issue which must be unique. But I don't know how to solve, could someone more experienced help me?
In that case, the php part was okay. Add onclick="openImage(this)" to it, and than move to the javascript part.
There, you would need a new function to pass the image src. I also re-named the modal image class to a more general one: image-content
// Get the modal
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("image-content");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Look at this code: element is passed to the function
function openImage(element) {
modal.style.display = "block";
// This is where the magic happens :)
modalImg.src = element.src;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<div class='content-img'><img src="https://picsum.photos/100/100?random=1" onclick="openImage(this)"></div>
<div class='content-img'><img src="https://picsum.photos/100/100?random=2" onclick="openImage(this)"></div>
<div class='content-img'><img src="https://picsum.photos/100/100?random=3" onclick="openImage(this)"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content" id="myModal">
<span class="close">×</span>
<img class="modal-content" id="image-content">
</div>
</div>
</body>
</html>
before getting your answer i tried to create two for loops in php and javascript and it works. These are the codes:
PHP:
$n = 0;
for($i = 0; $i !== $nIMG; $i++){
$n++;
$recordIMG = $q->fetch(PDO::FETCH_ASSOC);
echo "<div class='content-img'><img src='". $recordIMG['urljpg'] ."' id='infoIMG".$n."'></div>";
}
Javascript:
var nr = 0;
for(i = 0; i < 100; i++){
nr++;
var y = "infoIMG" + nr;
var img = document.getElementById(y);
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
}
Everything seems to work fine. Do you think it might be okay or is it better to use the code reported by you?
If I use this code, the only doubt is to understand how to pass the number of rows of the mysql database as the second parameter of the JS for loop.
So I'm trying to create a modal so that when the user clicks something it will open a modal window of an image. So far I've got a basic one going using a basic script but the way it's done will only allow one to work at a time.
<script>
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
captionText.innerHTML = modalImg.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
This method pretty obviously has the issue of selecting by specfic id. Would there be a way to re-write this so that it takes in the id and etc of whatever is clicked?
HTML:
<div class="modal-container">
<div id="modal" class="modal">
<div class="modal-caption">
<h1>Modal Caption</h1>
</div>
<div id="image" class="image">
<img src="https://images.pexels.com/photos/1079020/pexels-photo-1079020.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Älter Text">
</div>
<div class="excerpt">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
</div>
<div class="close-btn">
<button onclick="closeModal()">Close</button>
</div>
</div>
<div class="call-back-modal">
<button onclick="callModal()">Call Modal</button>
</div>
</div>
CSS:
.modal-container {
width: 100%;
position: relative;
}
.modal-container .modal {
position: absolute;
width: 50%;
top: -700px;
left: 25%;
transition: all 0.4s;
padding: 30px;
border: 1px solid #c3c3c3;
border-radius: 5px;
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
}
.modal-caption h1 {
margin-top: 0;
}
.modal-container .call-back-modal {
position: relative;
}
#image {
top: -700px;
}
.modal-container .modal img {
width: 100%;
}
JS:
function callModal(){
var modal = document.getElementById("modal");
if (modal.style.top === "0px") {
modal.style.top = "-700px";
} else {
modal.style.top = "0px";
}
}
function closeModal(){
var closeModal = document.getElementById("modal");
modal.style.top = "-700px";
}
Live: Demo
If you mean that you want whenever the user clicks on a certain element, the modal is displayed.
Then instead call a function inline : onclick="displayModal()" for whatever you want to display a modal when it's clicked.
So it will look like this :
function displayModal(){
modal.style.display = "block";
captionText.innerHTML = modalImg.alt;
}
I use this (w3school) code to trigger the modal when clicking on the button
// 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";
}
}
instead of using the button I want to use <a>'s onclick=function() method to trigger the modal. I already tried to exchange the *tn.onlclick-part, but that didnt work. How to accomplish this?
You can use a tag with preventDefault
const opener = document.querySelector('.btn');
opener.onclick = function(e) {
e.preventDefault(); // to prevent link's default behaviour
modal.style.display = "block";
}
<a class="btn" href="#">Open</a>
Include an anchor in your html and attach an event handler similar to the one for the button. You may add code to suppress the default behavior of clicking an anchor (ie. following the uri in the href attribute).
If you do not use the onclick attribute but assign handlers through the dom api with addEventListener, assert that the elements to attach the handlers to do exist. That's what the ready function attached to the window's load event is for.
let a
, btn
, modal
, span
;
// When the user clicks on the button, open the modal
function openModal(eve) {
if (eve.target.tagName.toLowerCase() === 'a') {
// Prevent standard link behavior
eve.preventDefault();
}
modal.style.display = "block";
} // openModal
// When the user clicks on <span> (x), close the modal
function closeModal(eve) {
modal.style.display = "none";
} // closeModal
function ready () {
modal = document.getElementById("myModal");
// Get the anchor that opens the modal
a = document.getElementById("myAnchor");
// Get the button that opens the modal
btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
span = document.getElementsByClassName("close")[0];
a.addEventListener ( 'click', openModal );
btn.addEventListener ( 'click', openModal );
span.addEventListener ( 'click', closeModal );
} // ready
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(eve) {
if (eve.target === modal) {
modal.style.display = "none";
}
};
window.addEventListener ( 'load', ready );
/* 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;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<a id="myAnchor" href="#">Open Modal here as well</a>
<!-- 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>
Credits
CSS and HTML of the online snippet from the w3School page the OP has referenced.
I have jQuery code that removes the scrollbar while the popup modal is open. So, when I need to close popup, the scrollbar needs to appear again and the function works as intended except for one thing: if the user clicks elsewhere outside of the popup it will close, but the scrollbar remains hidden. It only works fully as intended when the close icon is clicked.
Is there any possibility to set auto overflow scrolling when the user clicks outside of the popup box? i.e. Not just on the close icon?
$(document).ready(function () {
$("button#mainbtn").click(function (){
$('body').css('overflow', 'hidden');
});
$(document).on('click', '.closer', function (){
$('body').css('overflow', 'auto');
});
});
<div id="myModal" class="modal" >
<div class="modal-content">
<div class="closer">×</div>
</div>
</div>
Code that opens modal box:
var modal = document.getElementById('myModal');
var btn = document.getElementById("mainbtn");
var span = document.getElementsByClassName("closer")[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";
}
}
css:
.modal {
display: none;
z-index: 100;
padding-top: 100px;
position:fixed;
top: 0;
width: 100%;
height: 100%;
}
.modal-content {
background-color: #f2f2f2;
margin: auto;
position:relative;
width: 60%;
height:90%;
transition: all 5s ease-in-out;
}
.closer {
top:0px;
right:20px;
color: #00284d;
position:absolute;
font-size: 45px;
}
As you have attached an event to close the modal, if they click outside of it you can set the overflow to auto just after you hide the modal.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
$('body').css('overflow', 'auto');
}
}
you can make a $("html").click(function() and check if your popup is visible or hidden. The function is executed every time a click is made on the entire page
$("html").click(function() {
if($('.popup').is(":visible")){
alert("visible: dont show scroll")
}
else{
alert("hidden: show scroll")
}
});
$("button").click(function() {
$('.popup').toggle();
});
body{
background-color: blue;
height; 1000px;
width: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="popup">popup</div>
<button>toggle popup</button>
</body>
I've create a modal it works fine but when click outside it doesn't hide anymore. how can i do this? please help me anyone. thanks
// 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";
}
}
<button type="button" id="myBtn" class=" postsubmit-btn">Post</button>
<div id="myModal" class="modal">
<div class="modal-content ">
</div>
</div>
Please refer this code to close the modal on click outside the modal.
There is error in the span tag because span not available in your html code.
// Get the modal
var modal = document.getElementById('myModal');
// 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";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
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
}
<button id="myBtn">Post</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h2>Modal</h2>
</div>
</div>
you can use stopPropagation() method to open and close model,
please have a look below updated code, hope this will help/resolved your issues.
<button type="button" id="myBtn" class=" postsubmit-btn">Post</button>
<div id="myModal" class="modal">
<div class="modal-content ">
</div>
<button class="close">Close</button>
</div>
<style>
.modal{width:300px; height:300px; background:#f5f5f5; display:none;}
.close{float:right}
</style>
<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(event) {
event.stopPropagation();
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>
You can use Element.contains(event.target) to check if the click was on the element or one of its children. You can also use event.target!="myBtn" to make sure clicking on the button opens the modal.
.modal{
width: 50%;
height: 50%;
position: fixed;
top: 25%;
left: 25%;
border: 1px solid black;
background-color: dodgerblue;
}
<button type="button" id="myBtn" class=" postsubmit-btn">Post</button><button class="close">×</button>
<div id="myModal" class="modal" style="display: block;">
<div class="modal-content">
MODAL
</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.id!="myBtn"&&!modal.contains(event.target)) {
modal.style.display = "none";
}
}
</script>