Bootstrap 3 个来自页脚的模态,就像 Badoo 上的模态一样
Bootstrap 3 modal from footer like the one on 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);
}
如何使它像屏幕截图上的模式一样?
我稍微修改了你的代码,试试这个:
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;
}
当然需要添加合适的响应式断点。
我正在尝试创建一个在移动设备页面底部打开的 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);
}
如何使它像屏幕截图上的模式一样?
我稍微修改了你的代码,试试这个:
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;
}
当然需要添加合适的响应式断点。