Question

说明

单击按钮时会显示此弹出窗口，但出于某种原因，在显示时，背景不会覆盖导航栏。我已经尝试过更改z-index，但没有任何反应。当没有动画时，它只会覆盖导航栏。

代码

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

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

提前致谢，
路易斯。

Answer 1

试试这个CSS

CSS

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

.popup-container{
  position: relative;
}

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

Link For Reference

Answer 2

正如Iscmaro suggested above，也可以使用Bootstrap's modal来解决它，如下所示。

您还可以在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 个答案: