弹框控件

弹框可以说是一个非常常见的功能。我们这里用 layer。

官网：https://layer.layui.com/

来一个效果：

实现方式：

引入js和css文件：（注意：JQuery 的版本不要太低）

<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="/js/layer/layer.js"></script>
		
<link href="/js/layer/theme/default/layer.css" rel="stylesheet"/>

HTML内容：（这个内容最好放在 body 外面，避免样式干扰）

<div class='layer_notice' style='display:none;'>
	这里是内容了...
</div>

JS 显示控制：（点击某个按钮，展示弹框即可）

$(function(){
	$("#btn").click(open);
});

function open(){
	var theLayer = layer.open({
           type: 1,
           area: ['600px', '300px'],
           title: "选择路径", //标题
           content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层
           btn: ['确定'],
           cancel: function () {
           },
           yes: function () {
           	//todo:添加业务逻辑
               layer.close(theLayer); //点击确定按钮后的反应，关闭弹窗
           }
       });
}

显示项目：apiCenter，访问路径：http://localhost:8080/dept/layertest