Question

我正在为我的网站制作自定义图库，并且我已经将概述部分与所有缩略图一起使用。单击缩略图时，屏幕上会显示完整的图片，但我在将其与屏幕中心对齐时遇到问题。

请注意，每张图片都有不同的尺寸。

这是我到目前为止所做的：

.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);
}
.popup {
    display: none;
    position: absolute;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    overflow: auto;
}
.galleryentity{
    display: table;
    margin-bottom: 35px;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.gallerylink{
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

这是HTML：

<div class="galleryarea">
    <div class="galleryframe">
        <div class="galleryentity" style="background-image:url('pic1.jpg');">
            <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='block';document.getElementById('fade').style.display='block'"></a>
            <div id="pic1" class="white_content"><img class="pic1.jpg"></div>
        </div>
        .
        .
        .
    </div>
</div>

感谢。

Answer 1

中心弹出窗口的CSS方法：

.popup {

      position:fixed;
      /*display: none;*/    /* debug */
      border: 2px solid orange;  /* 8 is too thick ? */
      background-color: #eee;
      z-index:1002;
      overflow: auto;
      top:50%;
      left:50%;
      width:500px;  /* adjust accordingly */
      height:500px;   /* adjust accordingly */
      margin-left:-250px;   /* negative half of width above */
      margin-top:-250px;   /* negative half of height above */

       }

Answer 2

我想，你必须在你的情况下使用body：演示：http://jsfiddle.net/lotusgodkk/GCu2D/177/

JS：

$(document).ready(function () {
    $(".checked").position({
        "my": "center",
        "at": "center",
        "of": 'body' //Or window
    });
});

以弹出式div为中心

2 个答案: