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>