Layui点击添加按钮弹出带编辑框的对话框

钮钴禄泡泡

已于 2023-09-25 10:05:25 修改

阅读量9.7k

点赞数 6

分类专栏： J2EE 文章标签： layui

于 2020-05-18 13:24:43 首次发布

本文链接：https://blog.csdn.net/ifyouwjk/article/details/106185777

版权

J2EE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

点击添加按钮
在这里插入图片描述

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