如何实现Bootstrap模态框固定于导航栏下方且禁止页面滚动

我帮你调整了代码，完美实现你需要的两个效果：模态框固定在navbar-fixed-top下方，同时打开模态框时禁止页面滚动。下面是具体的修改点和完整代码：

核心修改说明 #

• 模态框定位调整：把自定义的.modal_css里的top: 0改成top: 50px（和导航栏的高度匹配），确保模态框刚好贴在导航栏下方。
• 修复页面滚动问题：Bootstrap默认会在模态框打开时给<body>添加.modal-open类（自带overflow: hidden），但你的代码里把.modal-backdrop设为opacity: 0不影响这个行为，我们额外加强了样式确保滚动被彻底禁用。
• 保留Bootstrap原生行为：没有移除.modal-backdrop，它是Bootstrap模态框正常工作的一部分（比如点击背景关闭模态框），只是隐藏了透明度。

修改后的完整代码 #

CSS 部分 #

/* 隐藏模态框背景的透明度，但保留元素本身 */
.modal-backdrop {
  opacity: 0 !important;
}

/* 模态框固定在导航栏下方 */
.modal_css {
  position: fixed;
  top: 50px; /* 匹配导航栏的高度 */
  left: 0;
  right: 0;
  width: 100%;
}

/* 加强模态框打开时的页面滚动禁用，避免样式冲突 */
body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

HTML & JS 部分 #

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function () {
  $("#a_search_modal").click(function () {
    $("#div_modal_search").modal();
  });
});
</script>

<body>
<!-- navbar start-->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
  <div class="container-fluid" style="padding-right: 0px;">
    <ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
      <li class=""><a href="#" class="" id="a_search_modal" style="padding: 15px"><i class="glyphicon glyphicon-search" style="color:royalblue;"></i></a></li>
    </ul>
  </div>
</nav>

<div style="padding-top:50px;">
  top-of-div <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>1 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>2 <br><br><br><br><br><br><br><br><br><br><br>3 <br><br><br><br><br> hello
</div>
<!-- navbar end-->

<!-- Modal -->
<div id="div_modal_search" class="modal fade modal_css" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>

效果说明 #

1. 点击搜索图标打开模态框时，模态框会精准定位在导航栏的正下方，不会覆盖导航栏。
2. 模态框打开期间，页面的滚动条会消失，无法滚动页面；关闭模态框后，滚动功能自动恢复。
3. 保留了Bootstrap模态框的原生行为（比如点击关闭按钮、点击背景关闭模态框）。

内容的提问来源于stack exchange，提问作者David Foie Gras