Twitter Bootstrap Question posted in

Image overlaying pop-up when animated – Twitter bootstrap

Explanation

I have this pop-up showing when clicking one of the images, but for some reason, when displayed, part of pop-up looks like it’s behind some of the images, as you can see below. I thought it’s had something to do with z-index, but I’ve already changed to 2147483647 (which looks like to be the maximum value for it) and the issue persists. It’ll only stop when there’s no animation.

Code

You can also see it in 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>

Thanks in advance,
Luiz.

Tags:

2

Answers


  1. 0

    One way around it would be to use the .col-md-4 of the clicked element to control the state, and add a z-index to it so it will appear on top of all of it’s siblings.

    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>
    Login or Signup to reply.
  2. 0

    I would recommend moving your .popup-overlay element outside the triggering .col-md-4 element. And then wrapping each group in a 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>

    Then update your jQuery to look for the .closest() parent element of .section:

    $(this).closest('.section').find('.popup-overlay').removeClass('popup-overlay-show');
$(this).closest('.section').find('.popup-overlay').addClass('popup-overlay-show');

    Demo: JSFiddle

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search