javascript - 如何做 Modal 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>

我希望有这样的结果:

感谢您的帮助

Answer 1

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

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

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

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