javascript - 默认情况下隐藏覆盖时，jquery 画廊不可见

Question

我有一个 jquery 画廊，它放置在全屏绝对定位元素内，默认情况下该元素使用 display: none 隐藏，直到您单击一个按钮然后该元素显示为 jquery .show()。问题是，当我单击一个按钮时，会显示该全屏元素，但该元素(jquery gallery)内的所有内容都不可见。仅显示全屏元素。当我删除全屏元素的显示时(因此它在加载时显示)画廊(或内容)是可见的。同样在默认情况下隐藏并且仅显示全屏元素而不显示其中的内容(画廊)的情况下，当我调整浏览器大小时显示画廊？

演示:http://codepen.io/riogrande/pen/WxxjvJ

HTML

<div class="gallery">
    <div class="demo">
        <ul id="lightSlider">
            <li data-thumb="static/images/galerija/thumbs/15.jpg">
                <img src="static/images/galerija/15.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/16.jpg">
                <img src="static/images/galerija/16.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/17.jpg">
                <img src="static/images/galerija/17.jpg" alt="galerija"/>
            </li>
            <li data-thumb="static/images/galerija/thumbs/18.jpg">
                <img src="static/images/galerija/18.jpg" alt="galerija"/>
            </li>
        </ul>
    </div>
    <div class="close-gallery">
        <img src="static/images/close.png" alt="close"> Zatvori galeriju
    </div>
</div>

CSS

gallery {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #2a2d2c;
  z-index: 99999;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  .close-gallery {
    position: absolute;
    right: 5%;
    top: 5%;
    z-index: 1000;
    cursor: pointer;
    color: white;
    font-size: 1.2rem;
    img {
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}

JQUERY( slider 是 LightSlider)

$(document).ready(function () {
        $('#lightSlider').lightSlider({
            gallery: true,
            item: 1,
            loop: true,
            slideMargin: 0,
            thumbItem: 9
        });
    });

    $('.galerija-gumb').click(function () {
        $('.gallery').show();
        $('body').scrollTop(0);
    });

    $('.close-gallery').click(function () {
        $('.gallery').hide();
        var slider = $('#lightslider').lightSlider();
    });

所以当我点击打开画廊时，只显示叠加的全屏元素

当我调整画廊大小时显示？？

当我从 CSS 中删除显示 block 时(因此全屏始终显示)图库正常加载

演示:http://codepen.io/riogrande/pen/WxxjvJ

Answer 1

你可以只做一个覆盖 <div>并更改 background , z-index和 content单击它，带有toggleClass例如。

我稍微更改了您的代码，所以这里有工作示例 http://codepen.io/anon/pen/vKKJEq