Twitter Bootstrap Question posted in

Pop-up background not covering navigation bar – Twitter bootstrap

Explanation

I have this pop-up showing when clicking a button, but for some reason, when displayed, the background isn’t covering the navigation bar. I’ve already tried to change the z-index, but nothing happens. It’ll only cover the navigation bar 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'),
      parent = $('.popup-container');

    trigger.on('click', function() {
      $(this).closest('.popup-container').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();
});
.navbar {
  background-color: yellow;
}

.overlay {
  cursor: pointer;
}

.btn {
  margin-top: 100px;
}

.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 {
  z-index: 1;
}

.popup-overlay-show .popup-overlay {
  opacity: 1;
  visibility: visible;
  z-index: 2000 !important;
}

.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>
    <header class="navbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Brand</a>
        </div>
      </div>
    </header>

    <div class="popup-container">

      <div class="popup-trigger animated fadeInUp">
        <div class="overlay">
          <a class="btn btn-default" href="#" role="button">Open</a>
        </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.
              </p>
            </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. Chosen as BEST ANSWER
    0

    As Iscmaro suggested above, it's also possible to solve it by using Bootstrap's modal, as you can see below.

    You can also see it on JSFiddle (full screen).

    .navbar {
    background-color: yellow;
}

.btn {
    margin-top: 100px;
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
}

.vertical-align-center {
    display: table-cell;
    vertical-align: middle;
}
    <!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>
    <header class="navbar navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Brand</a>
            </div>
        </div>
    </header>

    <button type="button" class="btn btn-default animated fadeInUp" data-toggle="modal" data-target="#myModal">Open</button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog vertical-align-center">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        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.
                    </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>


  2. 0

    Try This CSS

    CSS

    .navbar {
  background-color: yellow;
  z-index:10;
}

.popup-container{
  position: relative;
}

.popup-overlay-show {
    z-index: 16;
}

    Link For Reference

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

Back To Top
Search