Bootstrap 4模态加载Spinner水平居中及透明无边框问题问询

嘿，我来帮你搞定这个模态框的问题！针对你提出的两个需求，我调整了代码，让Spinner完美居中悬浮在页面上，同时去掉模态框的边框和背景。

核心修改点说明 #

• 实现全局水平垂直居中：
  利用Bootstrap 4的flex布局类，让模态对话框容器占满视口高度并自动居中，同时确保Spinner在内容块内也居中对齐。
• 移除模态框的边框与背景：
  通过CSS重置模态内容块的样式，去掉默认的背景、边框和阴影，再关闭背景遮罩，只保留Spinner悬浮效果。

完整代码示例 #

<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" data-backdrop="false" data-keyboard="false" tabindex="-1">
  <div class="modal-dialog d-flex justify-content-center align-items-center min-vh-100">
    <div class="modal-content text-center" style="background: transparent; border: none; box-shadow: none;">
      <span class="fa fa-spinner fa-spin fa-3x text-primary"></span>
    </div>
  </div>
</div>

<script>
function modal(){ 
  $('.modal').modal('show'); 
  setTimeout(function () { 
    console.log('hejsan'); 
    $('.modal').modal('hide'); 
  }, 3000); 
}
</script>

代码细节解释 #

1. 模态对话框容器：modal-dialog添加了d-flex justify-content-center align-items-center min-vh-100，这几个Bootstrap类分别实现了：
   • d-flex：将容器设置为flex布局
   • justify-content-center：水平方向居中
   • align-items-center：垂直方向居中
   • min-vh-100：让容器高度至少占满视口高度，保证垂直居中生效
2. 模态内容块：modal-content通过内联CSS移除了背景、边框和阴影，同时添加text-center让Spinner在内容块内水平居中
3. 背景遮罩：将data-backdrop改为false，去掉默认的灰色半透明背景，只保留Spinner悬浮在页面上的效果

内容的提问来源于stack exchange，提问作者Dr Ljotsson