Html 中心模态负载微调器引导程序 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48228724/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 15:03:06 来源:igfitidea点击:
Centered modal load spinner bootstrap 4
提问by Dr Ljotsson
I want a modal load spinner and have based a test on Bootstrap 4's modal dialog box. However, I can't get the modal horizontally centered on the page. If possible, I would also like the modal to be with no borders and transparent (so it appears that only the spinner is hovering over the page)
我想要一个模态加载微调器，并基于 Bootstrap 4 的模态对话框进行了测试。但是，我无法使模式水平居中在页面上。如果可能，我还希望模态没有边框且透明（因此似乎只有微调器悬停在页面上）
function modal(){
$('.modal').modal('show');
setTimeout(function () {
console.log('hejsan');
$('.modal').modal('hide');
}, 3000);
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" onclick="modal();">Open and close in 3 secs</button>
<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="width: 48px">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</div>
</div>
</div>
<p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>回答by Luis felipe De jesus Munoz
Apply this two classes:
应用这两个类：
.bd-example-modal-lg .modal-dialog{
display: table;
position: relative;
margin: 0 auto;
top: calc(50% - 24px);
}
.bd-example-modal-lg .modal-dialog .modal-content{
background-color: transparent;
border: none;
}
function modal(){
$('.modal').modal('show');
setTimeout(function () {
console.log('hejsan');
$('.modal').modal('hide');
}, 3000);
}.bd-example-modal-lg .modal-dialog{
display: table;
position: relative;
margin: 0 auto;
top: calc(50% - 24px);
}
.bd-example-modal-lg .modal-dialog .modal-content{
background-color: transparent;
border: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" onclick="modal();">Open and close in 3 secs</button>
<div class="modal fade bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content" style="width: 48px">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</div>
</div>
</div>
<p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>回答by Brian P
Old post, I know, but this seems a cleaner option to me...
旧帖子，我知道，但这对我来说似乎是一个更清洁的选择......
function modal(){
$('.modal').modal('show');
setTimeout(function () {
console.log('hejsan');
$('.modal').modal('hide');
}, 3000);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" onclick="modal();">Open and close in 3 secs</button>
<div class="modal fade" tabindex="-1" role="dialog" id="spinnerModal">
<div class="modal-dialog modal-dialog-centered text-center" role="document">
<span class="fa fa-spinner fa-spin fa-3x w-100"></span>
</div>
</div>
<p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>回答by Jehong Ahn
You can remove one more class. Because modal-dialogis a flex box.
您可以再删除一门课程。因为modal-dialog是一个弹性盒子。
text-center+ w-100-> justify-content-center
text-center+ w-100->justify-content-center
function modal(){
$('.modal').modal('show');
setTimeout(function () {
console.log('completed');
$('.modal').modal('hide');
}, 3000);
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" onclick="modal();">Open and close in 3 secs</button>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered justify-content-center" role="document">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</div>
</div>
<p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>