问默认情况下隐藏重叠时jquery图库不可见
EN

Stack Overflow用户

提问于 2016-06-15 20:23:57

回答 1查看 525关注 0票数 0

我有一个jquery图库，它位于全屏绝对定位元素中，默认情况下，该元素是用display: none隐藏的，直到单击一个按钮，然后用jQuery.show()显示该元素。问题是，当我单击一个按钮时，会显示全屏元素，但该元素(jquery图库)中的所有内容都是不可见的。只显示全屏元素。当我删除全屏元素的显示none (因此它在加载上显示)时，图库(或内容)是可见的。同样，在默认情况下，当它隐藏并且只显示全屏元素时，当我调整浏览器的大小时，它里面没有显示什么元素(图库)？

演示：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 (滑块是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();
    });

因此，当我单击打开图库时，只会显示覆盖全屏幕元素。