Question

我自己构建了一个CSS / JS图像模式/灯箱（正如其他人之前所做的那样，它基于W3Schools教程 - http://www.w3schools.com/howto/howto_css_modal_images.asp）然而我自己可以拥有多个图像在单个页面上重用相同的模式div，它允许我按容器调整图像大小，然后在单击时显示完整大小的图像。

问题1 - 图像不以模态（现在已固定）

为中心

问题2 - 在我添加缩放动画过渡之前，图像会按预期弹出。然后图像放大页面上的一个位置（向右和向下中心），然后弹出到模态中间的正确位置。我觉得我错过了定位非常简单的东西？任何人都可以帮我找到一个简单的解决方案，只使用CSS和Javascript？还是指出了一个更优雅的解决方案？

https://codepen.io/r3dg3cko/pen/ZLryQG

＆＃13;

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

＆＃13;

.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.8)
}

.modal-content{
margin: auto;
display: block;
max-width: 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)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

＆＃13;

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

＆＃13;

谢谢 - 罗布

Answer 1

将所有div.container1包装在div中并text-align:center it

<div class="center">
...//div.container1
</div

CSS

.center{
  text-align:center;
}

第四张图像的高度小于其他图像高度，这就是为什么它不成比例。

演示：https://jsfiddle.net/ypzfawt8/

CSS和JS多图像模态

1 个答案: