java小王博客

记录菜B的一点一滴,欢迎各位好汉前来叨扰!


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>博主qq:1756691861

layui将隐藏的div展示出来

2020-6-23 卑微小王 Layui框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>

</head>
<body>

  <a class="layui-btn" id="goadd" href="#" >添加</a>
<div id='Add' style="display: none">
<form class="layui-form" id='addForm' lay-filter="Add">
<div class="layui-form-item" style="margin-top: 25px">
<div class="layui-inline">
<label class="layui-form-label">角色编号<span
style="color: red; font-size: 150%; float: right; margin-left: 5px; margin-top: 5px;">*</span>
</label>

<div class="layui-input-inline">
<input type="text" id='roleNum' name="roleNum"
lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">角色名称<span
style="color: red; font-size: 150%; float: right; margin-left: 5px; margin-top: 5px;">*</span>
</label>

<div class="layui-input-inline">
<input type="text" id='roleName' name="roleName"
lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 25px">
<div class="layui-form-item layui-form-text" style="width: 630px">
<label class="layui-form-label">备注说明</label>
<div class="layui-input-block">
<textarea name='remark' placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
</div>
<div class="layui-form-item" style="margin-top: 25px" align="center">
<button class="layui-btn" lay-submit lay-filter="formDemo"
style="margin-right: 30px">立即提交</button>
<a class="layui-btn  layui-btn-primary" style="margin-right: 30px"
onclick="layer.closeAll('page')">取消</a>
</div>
</form>
</div>
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
layui.use(["form","jquery","layer"],function(){
//获取form对象
  var form= layui.form
    ,layer=layui.layer
    ,$=layui.jquery

//通过监听submit按钮  可使用betton按钮
// form.on('submit(demo1)',function(data){

// layer.open({
//   type: 1,
//   content: $('#Add') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
// });
   
// });
//通过按钮事件可使用a标签
$('#goadd').click(function(){
 
layer.open({
   type: 1,//默认是0当等于1时候是当前页面的元素比如隐藏的div 当等于2的时候是页面的额url你可以写其它页其它页面的url
   content: $('#Add'), //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
//弹窗关闭时回调    
   cancel: function(index, layero){
layer.confirm('确定要关闭么',{  
   btn: ['确定','取消'] //按钮
}, function(){
layer.msg('退出成功', {icon: 1});
   //只有当点击confirm框的确定时,该层才会关闭
layer.close(index)
})  
return false; 
},
//点击遮罩是否关闭弹层  true或false
shadeClose:true

}); 
})
 

 
})
</script>
</body>

</html>

发表评论: