I’m a beginner in Javascript and I created a modal image project similar to this: I want to display and scale up the modal image when I click on the image and disappear and scale it down when click the button for the next time. but the problem is when I use the display property for hiding and displaying the modal image when the button is clicked, the transform: scale property doesn’t work and the modal image will be displayed and hide suddenly.
so I tried to comment document.getElementById("modalimg").style.display = "none";
of my js code and it worked better but not good enough.
I also tried to run this with the visibility property instead of the display property and it worked good but I want to know what the problem is.
I also tried to search for similar titles in overflows but these 1 and 2 questions didn’t help.
"use strict";
document.getElementById("container").onclick = modal;
function modal(buttFlag) {
document.getElementById("modalimg").style.display = "inline";
document.getElementById("modalbackground").style.display = "block";
document.getElementById("butt").style.display = "block";
document.getElementById("modalimg").style.transition = "all 1s";
document.getElementById("modalimg").style.transform = "scale(7,4)";
if (buttFlag == true) {
document.getElementById("modalimg").style.transform = "scale(1,1)";
document.getElementById("modalimg").style.display = "none";//I tried comment this line and it worked better but not good enough.
document.getElementById("butt").style.display = "none";
document.getElementById("modalbackground").style.display = "none";
buttFlag = false;
// console.log("Im in");
}
}
#container{
width: 20%; height: 50%;
margin: 70%; margin-top: 12%;
position: absolute;
}
#container img{
width: 100%; height: 100%;
object-fit: cover;
}
#textContainer{
position: absolute;
width: 50%; height: 100%;
background-color: hsla(0, 0%, 100%, 0.5);
padding: 10px;
box-sizing: border-box;
text-justify:newspaper;
}
#textContainer p{
font-size: 2em;
word-break: break-all;
}
#modalbackground{
position: absolute;
width: 100%;height: 100%;
background-color: black;
opacity: 0.7;
display: none;
z-index: +1;
}
#modalimg{
width: 100px; height: 100px;
position: absolute;
top:45%; left: 45%;
z-index: +1;
display: none;
}
button{
font-size: 2em;
background-color: transparent;
border: none;
position: absolute;
left: 85%; top: 5%;
color: white;
z-index: +1;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="bd">
<div id="modalbackground"> </div>
<div id="container">
<img src="https://st4.depositphotos.com/11639344/22517/i/600/depositphotos_225179058-stock-photo-asian-rainforest-jungle-august.jpg" alt="jungle">
</div>
<button onclick="modal(true)" id="butt"> ☒ </button>
<img id="modalimg" src="https://st4.depositphotos.com/11639344/22517/i/600/depositphotos_225179058-stock-photo-asian-rainforest-jungle-august.jpg" alt="jungle">
</body>
</html>