Bootstrap Modal进入我网站的导航栏区域，而不是中心

<nav class="navbar">
  <div class="container">
    <a class="navbar-brand" href="#">网站名称</a>
    <button id="modalBtn" class="btn btn-primary">打开Modal</button>
  </div>
</nav>

<!-- Modal结构 -->
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal标题</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Modal内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

document.getElementById("modalBtn").addEventListener("click", function() {
  var modal = document.getElementById("myModal");
  modal.style.display = "block";
});

document.getElementsByClassName("close")[0].addEventListener("click", function() {
  var modal = document.getElementById("myModal");
  modal.style.display = "none";
});