Question

<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中的默认模态位置，我应该在哪里编辑以更改默认位置。

Answer 1

将以下css添加到您的html并尝试更改顶部，右侧，底部，左侧值。

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

Answer 2

我在这个课程中得到了更好的结果：

.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对这个想法的所有信用......）

Answer 3

要更改视口中的模态位置，您可以定位模态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;
}

Answer 4

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

.modal{
display:none;
}

Answer 5

如果需要更改模态底部的位置，则需要修改模体的最大高度：

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

正如其他答案所说，您可以在模态对话框中调整右侧和顶部：

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

“ vh”表示“视野高度的百分比”
“ vw”表示“视图宽度的百分比”

如何在bootstrap中更改模态的默认位置？

5 个答案: