如何更改Bootstrap模态框的默认位置？

Question

如何更改Bootstrap模态框的默认位置？

55

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>

      <div class="modal-body">
        <p>One fine body…</p>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div>
  </div>
</div>

我该如何在Bootstrap中更改默认模态框的位置？在哪里编辑才能更改默认位置？

- dpndra

这篇关于垂直居中Bootstrap模态窗口的Stack Overflow帖子可能对你有所帮助。 - Kheema Pandey

8个回答

19

我设置这个类会获得更好的结果：

.modal-dialog {
  position: absolute;
  top: 50px;
  right: 100px;
  bottom: 0;
  left: 0;
  z-index: 10040;
  overflow: auto;
  overflow-y: auto;
}

使用Bootstrap 3.3.7。

（所有荣誉归功于msnfreaky提出的想法...）

- MadBoomy

这对我来说可行，使用的是Bootstrap 3.3.7版本，而被接受的答案则不行。 - NemyaNation

我尝试了一些Python/Dash开发...它像魔法一样运行良好！ - Cyryl1972

7

如果您需要更改模态框的底部位置，您需要修改模态框主体（modal-body）的最大高度（max-height）。

.modal-body {
  max-height: 75vh;
}

就像其他答案所说的那样，您可以调整 modal-dialog 的右侧和顶部：

.modal-dialog {
  top: 10vh;
  right: 5vw;
}

"vh" 表示 "视窗高度的百分比"
"vw" 表示 "视窗宽度的百分比"

- carlin.scott

6

要在视口中更改模态框的位置，可以针对模态框div id进行定位，例如在此示例中，该id为myModal3。

    <div id="modal3" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


#myModal3 {
top:5%;
right:50%;
outline: none;
overflow:hidden;
}

- V31

侧边栏出现在中间，我们该如何隐藏它？ - dpndra

在CSS中加入了overflow:hidden。更新了CSS类#myModal3。 - V31

1

对于Bootstrap 5，只需将以下内容添加到您的css中。

  .modal-dialog { top: 7rem !important; }

不要将内容添加到.modal，否则当在模态框顶部轻触时，背景被向下移动导致无法关闭模态框。请注意保留HTML标记。

- Ken Ratanachai S.

1

在CSS文件中添加以下行：

.modal-dialog {
  transform: translateY(50%)!important;
}

您可以将50％更改为任何其他值，这将解决您在浏览器中遇到的问题。

- Joshi Sourabha

0

在Bootstrap 5中，有两种选项可以将模态框居中打开。无需添加任何自定义CSS。

1. 垂直居中的模态框

<div class="modal-dialog modal-dialog-centered">
  ...
</div>

2. 垂直居中可滚动的模态框

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

希望这也能有所帮助。

- MShaba007

-6

我知道有点晚了，但是我遇到了一个模态窗口的问题，即使它没有被触发，一些菜单栏上的链接也无法工作。但是我通过以下方式解决了这个问题：

.modal{
display:none;
}

- Rainman

1

如果你无法解决这个问题，就在它上面添加display: none。太棒了！ - Vibhor Dube

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- msnfreaky · Accepted Answer

将以下 CSS 添加到你的 HTML 中，然后尝试更改 top、right、bottom、left 的值。

.modal {
   position: absolute;
   top: 10px;
   right: 100px;
   bottom: 0;
   left: 0;
   z-index: 10040;
   overflow: auto;
   overflow-y: auto;
}