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>
<button type="button" class="btn btn-primary" onclick="book()">Small modal</button>
<div class="modal fade bd-example-modal-sm" id="myModal" role="dialog" data-backdrop="false" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<p class="text-center mb-0">
<i class="fa fa-check-circle text-success mr-1" aria-hidden="true"></i>
提交成功
</p>
</div>
</div>
</div>
</body>
</html>
粘贴代码到这运行