Scaling background of popup div
Question
I struggle with setting up a popup containing an image. I have a plain html doc where I try to open an image on the screen via clicking a div.
<body>
<div class="popup" onclick="myFunction()"><img src="sample.png"</img>
<span class="popupcontent" id="myPopup"></span>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
The CSS rules are also pretty simple:
.popup {
position: fixed;
margin:auto;
top:0%;
display:block;
cursor: pointer;
border-radius:25px;
}
.popup .popupcontent {
width:90%;
margin:auto;:
position: fixed;
visibility: hidden;
z-index: 9999;
background-image: url('image.png');
background-repeat: no-repeat;
background-size: contain;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
However, when I click the div "popup" nothing happens. I expected a popup to show up centered in the middle of the screen containing the defined background image. What's wrong with this approach?
1 answers
solution1
-1 2023-01-10 10:51:04
You missed a rule when you have written "popupcontent":
this is wrong: margin:aut;:
do this instead: margin: auto;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.