如何做模态引导出现在底部

Posted 2023-02-22

【中文标题】如何做模态引导出现在底部

【英文标题】：How to do Modal Bootstrap appear on bottom

【发布时间】：2016-04-30 21:18:31

【问题描述】：

如何设置引导模式出现在浏览器底部？

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>

我希望有这样的结果：

感谢您的帮助

【问题讨论】：

最好问问自己如何在不使用模式的情况下实现这一目标。模态应该是分离的，就像新窗口一样。适当的 div + 样式应该足够了。或者只是使用工具提示？

【参考方案1】：

类似的东西可以完成工作。 现在您需要使用填充、边距和宽度来调整模态；

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

使用modal-dialog，不要使用modal，否则modal在上面点击不会消失。

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

【讨论】：

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

不客气 :) 我用正确的方法编辑了解决方案，我猜 :P 你是个好测试员 :D 干杯

他的例子很好，只是没有集中。我更新了小提琴jsfiddle.net/9fg7jsu3/4再次感谢@Mateusz

【参考方案2】：

在<div class="modal-dialog" ...上使用这个，

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

【参考方案3】：

这个对我有用

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

【参考方案4】：

就我而言，这段代码运行良好：

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

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