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>
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.
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.
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 tried to create a function to show and hide a div, to hide the div user can use close button or click outside the div, but the problem is the close function to hide the div if user click element outside the div run first before i the div is showed:
html:
$('#close-add').on('click', function() {
$("#add-shipping-modal").hide();
});
$('#new-shipping').on('click', function() {
$("#add-shipping-modal").show();
});
$('body').click(function(event) {
setTimeout(
if (!$(event.target).closest('#add-shipping-modal').length && !$(event.target).is('#add-shipping-modal')) {
if ($("#add-shipping-modal").css('display') != 'none') {
$("#add-shipping-modal").hide();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new-shipping'">Open Div</button>
<div id="add-shipping-modal" style="display:none">
<button id="close-add">Close Div</button>
<p> Show Me </p>
</div>
when i click the #new-shipping button, the hidden div won't show up, i guess it's because when i click the #new-shipping button, it shows the div first and then trigger the body click function
There is already a solution provided at W3Schools.
Check Here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
Snippet
// 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";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- 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>Some text in the Modal..</p>
</div>
</div>
You have added ' extra in your code after new-shipping
<button id="new-shipping'">Open Div</button>
should be
<button id="new-shipping">Open Div</button>
https://jsfiddle.net/bntnfhLm/
Also please change the body click function by using preventdefault/stopPropagation
$("#add-shipping-modal").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$("#add-shipping-modal").hide();
});
try this
$('#new-shipping').on('click', function () {
$("#add-shipping-modal").show();
return false;
});
$(document).click(function (event) {
$("#add-shipping-modal").hide();
});
try this
$('#close-add').on('click', function () {
$("#add-shipping-modal").hide();
});
$('#new-shipping').on('click', function () {
$("#add-shipping-modal").show();
return false;
});
$("#add-shipping-modal").click(function () { return false; });
$(document).click(function (event) {
$("#add-shipping-modal").hide();
});