Fine tuning a modal image

web148 · August 29, 2022, 3:01pm

I have found this code, working and quite fitting with my aims. But I would fix the movement toward the bottom: it is not necessary, nor nice to go “to the hell” (I mean below the screen). It could be enough a narrower movement.
This the code:

<html>
<head>
<style>
.modal {
 z-index:1;
 display:none;
 padding-top:10px;
 position:fixed;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow:auto;
 background-color:rgb(0,0,0);
 background-color:rgba(0,0,0,0.2)
}

.modal-content{
 margin: auto;
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.modal-hover-opacity {
 opacity:1;
 filter:alpha(opacity=100);
 -webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
 opacity:0.60;
 filter:alpha(opacity=60);
 -webkit-backface-visibility:hidden
}

.close {
 text-decoration:none;
 float:right;
 font-size:24px;
 font-weight:bold;
 color:white;
}
.container1 {
 width:200px;
 display:inline-block;
}
.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.5)} 
 to {-webkit-transform:scale(1)}
}

@keyframes zoom {
 from {transform:scale(0.5)} 
 to {transform:scale(1)}
}
</style>
</head>
<body>
  <div class="container1">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer"
	onclick="onClick(this)" class="modal-hover-opacity">
  </div>
  <div class="container1">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzk3MjA1OF5BMl5BanBnXkFtZTcwMTE1Njg2MQ@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer" 
    onclick="onClick(this)" class="modal-hover-opacity">
  </div>
  <div class="container1">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM0MDgwNjMyMl5BMl5BanBnXkFtZTcwNTg3NzAzMw@@._V1_.jpg" style="max-width:100%;cursor:pointer" 
    onclick="onClick(this)" class="modal-hover-opacity">
  </div>
  <div class="container1">
    <img src="http://www.filmosphere.com/wp-content/uploads/2013/04/Iron-Man-3-affiche1-300x400.jpg" style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity">
  </div>


<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <div class="modal-content">
    <img id="img01" style="max-width:100%">
  </div>
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

</body>
</html>

web148 · August 29, 2022, 3:14pm

I noticed that I have to work with

.modal-content{  
 (...)
 top: 1%;
 left: 50%;
 transform: translate(1%, -1%);
}

The best would be a) a centered expanded image, and b) not going out of the screen.
Can you help me?

PaulOB · August 29, 2022, 9:02pm

I’m on a mobile at the moment so can’t test properly but if the issue is the centring then use flexbox instead of the transform.

e.g.


.modal {
  z-index: 1;
  padding-top: 10px;
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  border: 1px solid red;
}

web148 · August 30, 2022, 4:18am

Thank you. Indeed I had thought something similar:

.modal-content{
 margin: auto;
 /*display: block;
 position: absolute;*/

 display: flex;
 justify-content: center;
 align-items: center;
 
 /*top: 5%;*/
 /*right: 25%;*/
 transform: translate(1%, 1%);
 /*top: 1%;
 left: 12%;
 transform: translate(1%, -1%);*/
}

It seems like your code, but after changing background-color:rgba(0,0,0,0.2); to background-color:rgba(0,0,0,0.4); my code works better avoiding a too dark whole screen.

But (in both cases) I can’t get the vertical center

PaulOB · August 30, 2022, 4:45am

I’d need to see a full demo as you should have something like this now.

web148 · August 30, 2022, 6:20am

You can however see the code (the mine one) working (somehow, but not vertically centered) here.

PaulOB · August 30, 2022, 7:24am

You haven’t applied the flex rules to the modal as I mentioned. You applied the rules to the modal content which is wrong and then still left the transforms in place!

The code in my codepen is all you need but you will need to change the toggle of the js to say display:flex and not display:block or you break it all once again.

e.g.

//per modal-images (quasi pop-up)
function onClick(element) {
  document.getElementById("modalimg").src = element.src;
  document.getElementById("modaldiv").style.display = "flex";
}

Here’s a very rough codepen using your code although you really should avoid inline event handlers and move them to the js instead but that’s a question for the js forum.

web148 · August 30, 2022, 2:25pm

Thank you! I see.
But what do you mean by “re-instate the above line in a working page” ?

EDIT

Besides, in your code how can I get a transition effect?

PaulOB · August 30, 2022, 3:57pm

I hard coded the full image source in my demo but you are grabbing the image source from the thumbnail so you need to revert to that method of supplying the image.

Much the same as you did with a keyframe.

e.g.

web148 · August 30, 2022, 4:43pm

Thank you. I will try later with my website, but in a single file I see that the zoom effect (that I prefer) would be quite ugly because of the opacity of the “growing” frame.

PaulOB · August 30, 2022, 7:13pm

Just add another keyframe for the image.

web148 · August 31, 2022, 4:09am

Very nice, thank you!
I need some further attempts today to adapt it to my website.

EDIT

I noticed (only now: stupid me) that you have changed the html of my code: no contanier1 div and (therefore, I guess) two different images (the small one and the big one). I will see if it is possible to use the same image (as in the original code).

EDIT

I have to do some other attempts, but the following code, so far, seems work:

css

.modal-hover-opacity {
 opacity:1;
 filter:alpha(opacity=100);
 -webkit-backface-visibility:hidden;
 max-width:200px;cursor:pointer;
 max-height: 50vh;  
}

.modal-hover-opacity:hover {
 opacity:0.60;
 filter:alpha(opacity=60);
 -webkit-backface-visibility:hidden;
}

.container1 {
 width:200px;
 /*display:inline-block;*/
}

.modal {
  z-index: 99;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  /* display: flex; when shown*/
  display: none; /* hide initially*/
  justify-content: center;
  align-items: center;
}
.modal-content {
  margin: auto;
}

#modalimg {
  width: auto;
  height: auto;
  display: block;
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-width: calc(100% - 2rem);
  object-fit: contain;
  border: 5px solid #000;
}
.close {
  position: absolute;
  right: 25px;
  top: 25px;
  z-index: 2;
  background: #000;
  color: #fff;
  cursor: pointer;
  width: 25px;
  height: 25px;
  display: flex;
  font-size: 1.5rem;
  justify-content: center;
  align-content: center;
}
.modal-content {
  animation: fade 2s ease;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#modalimg {
  animation: zoom 1s ease;
}
@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

js

function onClick(element) {
  document.getElementById("modalimg").src = element.src;
  document.getElementById("modaldiv").style.display = "flex";
}

html

not changed from my original, that is

 <ul>
   <li class="container1">
   <img src="giotto_celano.jpg" alt="la morte del cavaliere da Celano" 
	onclick="onClick(this)" class="modal-hover-opacity" /> La morte del cavaliere da Celano
   </li>
  </ul>
  
 <div id="modaldiv" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <div class="modal-content">
    <img id="modalimg" style="max-width:100%" />
  </div>

web148 · August 31, 2022, 2:20pm

Yes, it works. I’m doing some further improvements (simplifying my code, thank to your help).
I.g. i have removed close button, or the container1 div. And I noticed that is possible avoid even to set a modal-hover-opacity class, with the following code

.modal-hover-opacity img, img[onclick] { (...)
}
.modal-hover-opacity img:hover, img[onclick]:hover {(..)}

When I finish my changes I will let you know the final result.

Very well!!!
Thank you, very, very much!!!

system · November 30, 2022, 9:20pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.