Question

我正在尝试创建一个图库页面作为缩略图列表。单击缩略图时，相关图片将以“弹出窗口”显示，-div显示图像的完整大小。

我遇到的问题是将div放在屏幕上。每张图片都有不同的尺寸。

如何使用javascript / jQuery执行此操作？

HTML：

<div id="pic1" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-
xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302"/></div>
<div id="pic2" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335"/></div>
<div id="fade" class="black_overlay"></div>
<div id="wrapper">
    <section id="gallery">
        <ul>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic2').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
        </ul>
    </section>
</div>

CSS：

    #gallery {
    text-align: center;
    width: 100%;
}

#gallery ul{
    display: block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: inline-block;
    vertical-align: top;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 250px;
    height: 250px;
    margin: 2.5%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    cursor: pointer;

.black_overlay{
    cursor: pointer;
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
}

.gallerylink{
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

Answer 1

您可以通过将transform: translate(-50%, -50%);，left: 50%;和top: 50%;添加到.white_content来实现此目的：

JSFiddle - DEMO

.white_content {
    position: absolute;
    display: none;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

您还应该在图片中添加vertical-align: middle;以删除以下空格 - DEMO

在屏幕上居中动态<div> </div>

1 个答案: