时间戳

首页 > 解决方案 > Bootstrap 3 modal 从页脚开始，就像 Badoo 上的一样

twitter-bootstrap - Bootstrap 3 modal 从页脚开始，就像 Badoo 上的一样

问题描述

我正在尝试创建一个在页面底部为移动设备打开的 Bootstrap 3 模式，就像 Badoo 正在使用的那样:)在此处输入图像描述

所以票价我想出了这个：

.modal {
position:fixed;
top:auto;
right:auto;
left:auto;
bottom:0;
}
.modal.fade .modal-dialog {
transform: translate3d(0, 100vh, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}

jsfiddle

如何使它像屏幕截图上的模态？

标签： twitter-bootstraptwitter-bootstrap-3bootstrap-modal

解决方案

我已经修改了你的代码，试试这个：

HTML：

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

<div id="table"></div>


<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">
      <ul>
        <li>Add to Favourites</li>
        <li>Skip</li>
        <li>View profile</li>
        <li>Report</li>
      </ul>
    </div>
  </div>
</div>

CSS：

#table {
  border: solid 1px red;
  height: 500px;
  width: 500px;
}

.modal {
  position: fixed;
  bottom: 0px;
}

.modal-dialog {
  position: fixed;
  bottom: 0;
  margin: 0;
  width: 100vw;
}

.modal-header {
  padding: 0;
}

.modal-content {
  border-radius: 20px 20px 0 0;
}
ul {
  padding: 0;
  margin: 0;
}

li {
  display: block;
  color: black;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid LightGray;
}

li:first-child {
  border: none;
}

li:last-child {
  color: red;
}

当然，您需要添加适当的响应式断点。

推荐阅读