如何让Bootstrap模态窗口显示在底部

Question

如何设置bootstrap模态框出现在浏览器底部？ https://jsfiddle.net/9fg7jsu3/

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">  
        <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>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
            <p>content</p>
        </div>
      </div>
    </div>

我希望得到这样的结果:

感谢任何帮助

- Gislef

---

最好问问自己如何在不使用模态框的情况下实现。模态框应该是独立的，就像新窗口一样。适当的div +样式应该足够了。或者，也许只需使用工具提示？ - Dawid Gosławski

Answer 1

类似这样的东西就可以了。现在你需要调整填充、边距和宽度来调整你的模态框。

.modal-dialog {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}  

使用modal-dialog而不是modal，否则如果您在其上方单击，模态框将不会消失。

https://jsfiddle.net/9fg7jsu3/2/

- matvs

---

谢谢@Mateusz Antoni Świątkowski。但是当我点击上面的模态框时，它不会消失，只有在我点击侧边时才会消失。 - Gislef

不客气 :) 我用正确的解决方案进行了编辑，我猜应该是这样的 :P 你是个好测试人员 :D干杯 - matvs

他的示例很棒，只是不够集中。我更新了 jsfiddle https://jsfiddle.net/9fg7jsu3/4/ 。再次感谢 @Mateusz - Gislef

Answer 2

在<div class="modal-dialog" ...中使用这个：

<div class="modal-dialog modal-dialog-centered" style="align-items: flex-end;">
    ...
</div>

- tomcounsell

---

这是最好的方法，但是当模态框出现时，它们会添加display:block，所以您需要覆盖它。 display:flex; - Mike Lucid

align-items: flex-end 是解决方案。 - RicardoVallejo

Answer 3

在我的情况下，这段代码完美地运行了：

.modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0%;
  right: 0%;
  transform: translate(-50%, -50%);
}

在Bootstrap 5中，接受的解决方案更改宽度，但没有任何具体原因。

- Federico Navarrete

Answer 4

这个对我有用。

.modal-dialog {
  top: calc(100% - 300px); 
}

- Ivan Sisovic