Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。但是使用的时候，个别情况不能满足需求，比如：有时候点击某一个按钮，我们弹出一个模态框，但是模态框中海油链接，还想弹出一层，如果再用模态框弹出显然 用户体验不是很好，而且增加我们的工作量，这里介绍下Bootstrap4+layUI 弹出层的使用。其实Bootstrap4 和之前的bootstrap用法都差不多，只不过bootstrap4更加简洁，可根据具体需求调整。
1.先看效果图
如果不是你想要的效果，可以不用往下看了
2. 先看bootstrap4的模态框
<div class="container">
<!-- 模态框 data-backdrop="static" 是为了点击空白处 模态框不自动关闭-->
<div class="modal fade" id="myModal" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h5 class="panel-title pl-xl-5"> service</h5>
<!--注意这里我把Button里面的 data-dismiss="modal" 去掉了，如果不去掉，点击按钮模态框会关闭，而我不想关闭，想点击按钮出发事件-->
<button type="button" id="closeModal" class="close" >×</button>
</div>
<div class="panel">
<div class="title-icon"><img src="../dist/svg/robotchat-pc.svg" width="60"/> </div>
<div class="panel-body">
<div id="webchat"></div>
</div>
</div>
</div>
</div>
</div>
</div>
3.layui 弹出层
这里给出一个小demo，更多配置请看layui 官方文档：https://www.layui.com/doc/modules/layer.html
<!DOCTYPE html>
<html >
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;url=nosupport.html">
<![endif]-->
<link rel="stylesheet" href="css/layui.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="layui.all.js"></script>
<script type="text/javascript">
$(function(){
layer.open({
title: false, //去除title 默认：'信息'
type: 0, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
shade: 0,
anim: 0, //弹出动画
closeBtn:0, // 关闭弹出框关闭按钮
btnAlign:'c', //控制按钮位置 btnAlign的默认值为r，即右对齐 c 居中对齐 l 左对齐
content: "Do you want to end the conversation?", //content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同
btn: ['Yes', 'No'], //当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，
yes: function (index) {
//控制时间
window.close();
},
btn2: function (index, layero) {
console.log(layero);
}
});
})
</script>
</head>
</html>
4. bootstrap4+layui 完整案列
里面内容可根据具体需求更改
<!DOCTYPE html>
<html >
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link href="/dist/images/icon.png" rel="icon" type="image/x-icon" />
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;url=nosupport.html">
<![endif]-->
<link rel="stylesheet" href="/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/dist/js/layui/css/layui.css">
<script src="/dist/js/jquery.min.js"></script>
<script src="/dist/js/layui/layui.all.js"></script>
<script src="/dist/js/bootstrap.min.js"></script>
<script>
//控制模态框水平垂直居中
function centerModals() {
$('#myModal').each(function(i) {
var $clone = $(this).clone().css('display','block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
};
//居中展示
$('#myModal').on('show.bs.modal', centerModals);
//点击关闭按钮，触发事件
$("#closeModal").click(function(){
layer.open({
title: false,
type: 0,
shade: 0,
anim: 0,
closeBtn:0,
btnAlign:'c',
content: "Do you want to end the conversation?",
btn: ['Yes', 'No'],
yes: function (index) {
window.close();
},
btn2: function (index, layero) {
layer.close(index);
}
});
});
//页面大小变化是仍然保证模态框水平垂直居中
$(window).on('resize', centerModals);
$("#myModal").modal('show');
</script>
</head>
<body >
<div class="container">
<!-- 模态框 -->
<div class="modal fade" id="myModal" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h5 class="panel-title pl-xl-5"> {{'page_flight.select.robot_service' | mTranslate}}</h5>
<button type="button" id="closeModal" class="close" >×</button>
</div>
<div class="panel">
<div class="title-icon"><img src="../dist/svg/robotchat-pc.svg" width="60"/> </div>
<div class="panel-body">
<div id="webchat"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>