gpt4 book ai didi

css - 垂直居中 Angular Bootstrap 模式窗口

转载 作者:行者123 更新时间:2023-11-28 09:25:48 25 4
gpt4 key购买 nike

无论显示的内容大小如何,我怎样才能垂直居中这个模态窗口。在我的页面中,我将图像显示为模态窗口,我希望它显示在屏幕中央。我可以水平对齐,但不能让它垂直对齐。有什么想法/例子吗?

我在我的页面中遵循了这个例子:modal window demo plunker

但是模态窗口的实际内容是这样的:

<script type="text/ng-template" id="myModalContent.html">
<div>
<img class= "attachmentImage" src={{items}} />
</div>
</script>

我是否应该在 bootstrap.min.cssui-bootstrap-tpls-0.13.0.js 中进行更改,或者是解决此问题的最佳方法在我自己的工作表中使用我的样式。

非常感谢您的宝贵时间。如果您需要更多信息或者我不清楚,请告诉我。

最佳答案

我强烈反对 1Bladesforhire的答案,因为 modal 容器的顶部在高于视口(viewport)高度时变得不可访问。当使用 absolute 垂直居中方法将比 parent 高的 child 居中时,这是一个常见问题。

我首选的垂直居中 Bootstrap 模态的方法是

.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}

/* you only need the above CSS. The code below centers the modal trigger button */

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<div class="modal fade" id="myModal" 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">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

.modal-content 比视口(viewport)宽度短时垂直居中,即使它的高度为 300vh 仍可完全访问:

.modal-dialog {
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
min-height: calc(100vh - 60px);
}
@media (max-width: 767px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}

/* you only need the above CSS. The code below centers the modal trigger button */

.modal-content {
height: 300vh;
}

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<div class="modal fade" id="myModal" 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">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

关于css - 垂直居中 Angular Bootstrap 模式窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30357659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com