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']
				
	  });
  });
  

在这里插入图片描述layui弹出层的动画
layui弹出层的基本类型

猜你喜欢

转载自blog.csdn.net/ifyouwjk/article/details/106185777