html – 集中模态加载微调器引导程序4

概述我想要一个模态加载微调器,并在Bootstrap 4的模态对话框中进行测试.但是,我无法将模态水平居中在页面上.如果可能的话,我也希望模态没有边框和透明(所以看起来只有微调器悬停在页面上) function modal(){ $('.modal').modal('show'); setTimeout(function () { console.log(' 我想要一个模态加载微调器,并在bootstrap 4的模态对话框中进行测试.但是,我无法将模态水平居中在页面上.如果可能的话,我也希望模态没有边框和透明(所以看起来只有微调器悬停在页面上)

function modal(){       $('.modal').modal('show');       setTimeout(function () {       	console.log('heJsan');       	$('.modal').modal('hIDe');       },3000);    }

<link rel="stylesheet" href="@R_403_6822@s://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/CSS/bootstrap.min.CSS" integrity="sha384-Zug+QIDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">  <link rel="stylesheet" href="@R_403_6822@s://maxcdn.bootstrapcdn.com/Font-awesome/4.7.0/CSS/Font-awesome.min.CSS">  <script src="@R_403_6822@s://code.jquery.com/jquery-3.2.1.slim.min.Js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>  <script src="@R_403_6822@s://cdnjs.cloudflare.com/AJAX/libs/popper.Js/1.12.9/umd/popper.min.Js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>  <script src="@R_403_6822@s://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"  onclick="modal();">Open and close in 3 secs</button><div  data-backdrop="static" data-keyboard="false" tabindex="-1">    <div >        <div  >            <span ></span>        </div>    </div></div><p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>

解决方法 应用这两个类：

.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="@R_403_6822@s://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/CSS/bootstrap.min.CSS" integrity="sha384-Zug+QIDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">  <link rel="stylesheet" href="@R_403_6822@s://maxcdn.bootstrapcdn.com/Font-awesome/4.7.0/CSS/Font-awesome.min.CSS">  <script src="@R_403_6822@s://code.jquery.com/jquery-3.2.1.slim.min.Js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>  <script src="@R_403_6822@s://cdnjs.cloudflare.com/AJAX/libs/popper.Js/1.12.9/umd/popper.min.Js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>  <script src="@R_403_6822@s://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"  onclick="modal();">Open and close in 3 secs</button><div  data-backdrop="static" data-keyboard="false" tabindex="-1">    <div >        <div  >            <span ></span>        </div>    </div></div><p>I would like the <ul><li>spinner horizontally centered on page<li> the modal transparent without borders</ul></p>

总结

以上是内存溢出为你收集整理的html – 集中模态加载微调器引导程序4全部内容，希望文章能够帮你解决html – 集中模态加载微调器引导程序4所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。