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

点击添加按钮
Layui点击添加按钮弹出带编辑框的对话框_第1张图片

<button id="addnotebook" type="button" class="layui-btn layui-btn-normal">添加button>

准备一个弹框notebook_add.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点击添加按钮弹出带编辑框的对话框_第2张图片layui弹出层的动画
layui弹出层的基本类型

你可能感兴趣的:(J2EE)