twitter-bootstrap 如何使引导模式从底部淡入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34164889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a bootstrap modal fade in from the bottom?
提问by GtGtGt
How do you make a modal fade in from the bottom to the top?
你如何使模态从底部到顶部淡入？
By default it starts at the top of the page. I want to get it down in the footer.
默认情况下，它从页面顶部开始。我想把它放在页脚中。
Is there a class of its own for this? I modify the CSS?
有它自己的类吗？我修改了CSS？
How to do this?
这个怎么做？
<div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> ABOUT </h4>
</div>
<div class="modal-body">
CONTEúDO
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
回答by Josh Crozier
By default, here is the styling that is used to make the modal fade in from the top:
默认情况下，这是用于使模态从顶部淡入的样式：
.modal.fade .modal-dialog {
transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
If you want it to fade in from the bottom, change the -25%value to something like 100vhor 100%:
如果您希望它从底部淡入，请将-25%值更改为类似100vh或100%：
.modal.fade .modal-dialog {
transform: translate3d(0, 100vh, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
回答by Vinay Mittal
Could not find an answer anywhere, so after 5 hours of finding I found out that initially we need to set the height to 0% and when we show the modal we need to set the actual height of the modal and same we need to do at the time of closing this modal. For e.g - In my case I have given the name of the modal as modal-add-popupand here is the CSS for making it happen
在任何地方都找不到答案，所以经过 5 个小时的查找，我发现最初我们需要将高度设置为 0%，当我们显示模态时，我们需要设置模态的实际高度，同样我们需要在关闭此模式的时间。例如 - 在我的例子中，我已经给出了模态的名称，modal-add-popup这是实现它的 CSS
Setting the initial height to 0
将初始高度设置为 0
.modal-add-popup {
height: 0;
}
Setting the height to 75% when modal comes up
当模态出现时将高度设置为 75%
.modal.fade.show .modal-add-popup {
height: 75.5%;
transition: height 0.3s;
}
Setting the height to 0% when modal close down
模态关闭时将高度设置为 0%
.modal.fade .modal-add-popup {
height: 0px;
transition: height 0.3s !important;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: none;
transform: none;
}
