覆盖导航栏

覆盖导航栏

关注
发信
关注(28)粉丝(399)

javascript - 弹出背景不覆盖导航栏

解释
我有一个弹出窗口显示当点击一个按钮，但由于某种原因，当显示时，背景不覆盖导航栏。我已经试过改变z指数了，但是什么也没发生。只有当没有动画时，它才会覆盖导航栏。
代码
您也可以在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>

提前谢谢你，
路易斯。

最佳答案

试试这个CSS。
CSS

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

.popup-container{
  position: relative;
}

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

Link For Reference

09-07 18:30
Powered by LMLPHP ©2024 覆盖导航栏 0.048760