Question

说明

单击其中一个图像时，我会显示此弹出窗口，但出于某种原因，当显示时，部分弹出窗口看起来像是在某些图像后面，如下所示。我认为它与z-index有关，但我已经改为2147483647（看起来是它的最大值）并且问题仍然存在。它只会在没有动画时停止。

代码

您也可以在JSFiddle（full screen）中看到它。

var custom = function() {

    var handlePopup = function() {
        var overlay = $('.popup-overlay'),
            close = $('.popup-close'),
            trigger = $('.popup-trigger');

        trigger.on('click', function() {
            $(this).find('.popup-overlay').removeClass('popup-overlay-show');
            $(this).find('.popup-overlay').addClass('popup-overlay-show');
        });

        close.on('click', function(e) {
            e.stopPropagation();
            overlay.removeClass('popup-overlay-show');
        });
    }

    return {
        init: function() {
            handlePopup();
        },
    };
}();

$(document).ready(function() {
    custom.init();
});

.overlay {
    cursor: pointer;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483647;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.55);
}

.popup-overlay-show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 600px;
    height: auto;
    background: #fff;
    padding: 35px;
    margin: 0 auto;
    transform: translate3d(0, -50%, 0);
}

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div class="grid">
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
</body>

</html>

提前致谢，
路易斯。

Answer 1

绕过它的一种方法是使用点击元素的.col-md-4来控制状态，并为其添加z-index，使其显示在所有状态的顶部。兄弟姐妹。

＆＃13;

var custom = function() {

    var handlePopup = function() {
        var overlay = $('.popup-overlay'),
            close = $('.popup-close'),
            trigger = $('.popup-trigger'),
            parent = $('.grid .col-md-4');

        trigger.on('click', function() {
            $(this).closest('.col-md-4').addClass('popup-overlay-show');
        });

        close.on('click', function(e) {
            e.stopPropagation();
            parent.removeClass('popup-overlay-show');
        });
    }

    return {
        init: function() {
            handlePopup();
        },
    };
}();

$(document).ready(function() {
    custom.init();
});

＆＃13;

.overlay {
    cursor: pointer;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.55);
}

.popup-overlay-show .popup-overlay {
    opacity: 1;
    visibility: visible;
}

.popup-overlay-show {
  z-index: 1;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 600px;
    height: auto;
    background: #fff;
    padding: 35px;
    margin: 0 auto;
    transform: translate3d(0, -50%, 0);
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<body>
    <div class="grid">
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-4">

            <div class="popup-trigger animated fadeInUp">
                <div class="overlay">
                    <img class="img-responsive" src="http://i.imgur.com/juvM8NA.png" alt="">
                </div>
                <div class="popup-overlay">
                    <div class="popup-content">
                        <a href="javascript:void(0);" class="popup-close">Close</a>
                        <div class="row">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>

＆＃13;

Answer 2

我建议您将.popup-overlay元素移到触发.col-md-4元素之外。然后将每个组包装在div：

中

<div class="section" id="5">
  <div class="col-md-4">
    <div class="popup-trigger animated fadeInUp">
      <div class="overlay">
        ...
      </div>
    </div>
  </div>
  <div class="popup-overlay">
    <div class="popup-content">
      <div class="row">
        ...
      </div>
    </div>
  </div>
</div>

然后更新您的jQuery以查找.closest()的{{1}}父元素：

.section

演示：JSFiddle

动画时图像覆盖弹出窗口

说明

代码

2 个答案: