layui点击添加按钮弹出带编辑框的对话框
点击添加按钮
<button id="addnotebook" type="button" class="layui-btn layui-btn-normal">添加</button>
准备一个弹框notebook_add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="./js/notebook_add.js"></script>
</head>
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
<body>
<div>
<label class="layui-form-label"> 笔记本名称</label>
<div class="layui-input-block">
<input type="text" name="name" id="name" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" style="width:200px">
</div>
<button id="addnotebook" type="button" class="layui-btn layui-btn-normal" style="margin-left:112px;margin-top:20px" >确定</button>
</div>
<script>
</script>
</body>
</html>
获取添加按钮的id，添加点击事件
layui.use([ 'layer', 'table', "laypage","jquery"], function(){
var
layer = layui.layer //弹层
,table = layui.table //表格
,laypage = layui.laypage //分页
,$ = layui.jquery
$('#addnotebook').on("click",function(){
layer.open({
//调整弹框的大小
area:['500px','300px'],
shadeClose:true,//点击旁边地方自动关闭
//动画
anim:2,
//弹出层的基本类型
type: 2,
//刚才定义的弹窗页面
content: 'notebook_add.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
});
|