核心提示：Bootstrap自定义模态框，自动消失引入css 、jQuery、 font-awesome调整模态框的 csssetTimeout 定时关闭去掉遮罩层!DOCTYPE htmlhtml lang=...
Bootstrap自定义模态框，自动消失
引入css 、jQuery、 font-awesome
调整模态框的 css
setTimeout 定时关闭
去掉遮罩层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" ></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<style>
.modal-content {
// 宽度自适应内容
width: fit-content;
// 流出间隙
padding: 0.2rem 0.4rem;
}
</style>
</head>
<script>
function book(){
$('#myModal').modal('show');
setTimeout(function(){
$("#myModal").modal("hide")
},1200);
}
</script>
<body>
<!-- Small modal -->
<button type="button" class="btn btn-primary" onclick="book()">Small modal</button>
<!-- data-backdrop="false"去除遮罩层 -->
<p class="modal fade bd-example-modal-sm" id="myModal" role="dialog" data-backdrop="false" aria-hidden="true">
<p class="modal-dialog modal-sm">
<p class="modal-content">
<p class="text-center mb-0">
<i class="fa fa-check-circle text-success mr-1" aria-hidden="true"></i>
提交成功
</p>
</p>
</p>
</p>
</body>
</html>
