javascript - 动画时图像叠加弹出

标签 javascript jquery html css

解释

我在单击其中一张图片时显示了此弹出窗口，但由于某种原因，当显示时，弹出窗口的一部分看起来像是在某些图像后面，如下所示。我以为它与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>

提前致谢，
路易斯。

最佳答案

一种解决方法是使用被点击元素的 .col-md-4 来控制状态，并向其添加 z-index 以便它会出现在所有它的 sibling 之上。

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();
});
.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);
}
<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>

关于javascript - 动画时图像叠加弹出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45469383/

上一篇：javascript - 如何正确加载导航栏和页面内容？

下一篇：javascript - 图像 Wordpress 顶部的可点击 figcaption 链接

相关文章：

javascript - 如何通过重新加载按钮或 F5 键识别浏览器重新加载？

javascript - 何时以及如何调用寻找页面滚动操作的 JavaScript 函数？

javascript - 使用 FetchContent JS 发出警报

javascript - 为什么我会收到此错误？ "Uncaught ReferenceError: title is not defined"

javascript - 如何在窗口加载时自动加载此 JavaScript 代码？

Javascript/如果我有一个词，则在点后强制换行

javascript - 滚动()变得很大滞后

java - aria-hidden span/button 阻止获取元素 - Selenium

javascript - 在 Express 中使用聊天 irc 机器人发送后无法设置 header

javascript - 如何使用 JavaScript 将 HTML FORM 数据从一个页面发送到另一个页面

©2024 IT工具网  联系我们