Question

我有一个jquery图库，它放在全屏绝对定位元素的内部，默认情况下，该元素用display: none隐藏，直到你单击一个按钮，然后该元素显示为jquery .show()。问题是，当我单击一个按钮时，会显示该全屏元素，但该元素内的所有内容（jquery库）都不可见。仅显示全屏元素。当我删除全屏元素的显示无（因此在加载时显示）时，可以看到图库（或内容）。此外，在默认情况下隐藏它并且仅显示全屏元素而不显示内部元素（图库）的情况下，当我调整浏览器大小时，会显示图库？

DEMO：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中移除显示块时（因此始终显示全屏），库正常加载

DEMO：http://codepen.io/riogrande/pen/WxxjvJ

Answer 1

您只需点击一次<div>即可更改background，z-index和content，例如toggleClass。

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

默认情况下隐藏叠加层时，jquery库不可见

1 个答案: