Fine tuning a modal image

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” :slight_smile: (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>

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?

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;
}
1 Like

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 :frowning:

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

1 Like

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

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.

2 Likes

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?

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.

1 Like

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.

Just add another keyframe for the image.

1 Like

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>
1 Like

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!!! :grinning: :+1: :+1: :+1:

1 Like