Fine Tuning a Modal Image – HTML & CSS – SitePoint Forums

0

I found this code, which works and perfectly matches my goals. But I would fix the movement downwards: it is neither necessary nor pleasant to go “to hell” (I mean under the screen). A narrower movement might be enough.
Here is the code:







  


I noticed that I have to work with

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

The best would be a) a center magnified image, and b) does not go off screen.
Can you help me?

I’m on mobile at the moment so can’t test properly, but if the problem is centering, use flexbox instead of transform.

for example


.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

Thanks. 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 looks like your code, but after changing background-color:rgba(0,0,0,0.2); at background-color:rgba(0,0,0,0.4); my code works best avoiding an entire screen that is too dark.

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

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



1 like

You can however see the code (mine) 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 that is wrong and still left the transformations in place!

The code in my codepen is all you need, but you’ll have to change the toggle in the js to say display:flex and not display:block or you’ll break everything yet again.

for example

//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

Thanks! I see.
But what do you mean by “reintegrating the above line into a working page”?

EDIT

Also, in your code, how can I achieve a transition effect?

I hardcoded the full image source in my demo, but you get the image source from the thumbnail, so you have to fall back to that method of providing the image.

Much like you did with a keyframe.

for example



1 like

Thanks. I will try later with my website, but in one file I see that the Zoom the effect (which I prefer) would be quite ugly due to the opacity of the “increasing” frame.

Just add another keyframe for the image.



1 like

Very well thank you!
I need a few more tries today to make it fit my website.

EDIT

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

EDIT

I have to make further attempts, but the following code, so far, seems to 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, i.e.

 
  • la morte del cavaliere da Celano La morte del cavaliere da Celano



1 like

Share.

Comments are closed.