layer弹窗和layui表单取消

10 篇文章 0 订阅
6 篇文章 0 订阅
<div id="add-main" style="display: none;">
              <form class="layui-form" id="add-form"  action="">
                  <div class="layui-form-item center" >
                    <label class="layui-form-label" style="width: 100px" >配置名称</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" required value="" style="width: 240px"  lay-verify="required" placeholder="请输入配置名称" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">配置类型</label>
                    <div class="layui-input-block">
                      <input type="text" name="type" required  style="width: 240px" lay-verify="required" placeholder="请输入配置类型" autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 100px">配置值&emsp;</label>
                    <div class="layui-input-block">
                      <input type="text" name="value" required  style="width: 240px" lay-verify="required" placeholder="请输入配置值" autocomplete="off" class="layui-input">
                      <!-- <input type="hidden" name="id" style="width: 240px" autocomplete="off" class="layui-input"> -->
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" lay-submit lay-filter="save" >立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn" >重置</button>
                    </div>
                  </div> 
              </form>    
        </div>

 javascript代码

<script type="text/javascript">
 
  layui.use(['layer', 'form'], function () {
   var layer = layui.layer, 
   $ = layui.jquery, 
   form = layui.form;

   //表单验证
   form.verify({
       firstpwd: [/(.+){6,12}$/, '密码必须6到12位'],
       secondpwd: function(value) {
                     if(value != $("#firstpwd").val()){
                            $("#secondpwd").val("");
                     return '确认密码与密码不一致';
                    }
        },
        productCodes: function(value){
                      if(value == ''){
                     return "请选择系统分配";
                    }
        },
        sysqx: function(value){
                    if(value == ''){
                    return "请选择权限";
                    }
           }  
    });


 //提交监听事件
  form.on('submit(save)', function (data) {
        params = data.field;
        //alert(JSON.stringify(params))
        submit($,params);
        return false;
    }) 
    
      var obj = document.getElementById('closeBtn');
      obj.addEventListener('click', function cancel(){
                  CloseWin();
        });
})

//提交
function submit($,params){
          $.post('${ctx}/golbal/add1', params, function (res) {
                if (res.status==1) {
                    layer.msg(res.message,{icon:1},function(index){
                        CloseWin();
                    }) 
                }else if(res.status==2){
                    layer.msg(res.message,{icon:0},function(){
                        parent.location.href='${ctx}/golbal/main';
                        CloseWin();
                       })
                }else{
                    layer.msg(res.message,{icon:0},function(){
                        location.reload(); // 页面刷新
                             return false
                    })
                } 
            }, 'json');
       }
debugger;
 //关闭页面
 function CloseWin(){
     parent.location.reload(); // 父页面刷新
     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
     parent.layer.close(index); //再执行关闭 
 }  
   
</script>

iframe 

var index = parent.layer.getFrameIndex(window.name);
parent.layui.table.reload('announcement');//重载父页表格,参数为表格ID
parent.layer.close(index);
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui有一个弹窗组件layer,可以用来生成弹窗表单。具体的步骤如下: 1. 引入Layuilayer组件和form组件。在HTML文件中引入以下代码: ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css"> <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script> ``` 2. 在JS文件中定义一个弹窗表单的函数,例如: ```javascript function openForm() { layui.use(['layer', 'form'], function(){ var layer = layui.layer; var form = layui.form; layer.open({ type: 1, area: ['500px', '300px'], title: '表单弹窗', content: $('#form'), btn: ['提交', '取消'], yes: function(index, layero){ // 提交表单的逻辑 }, btn2: function(index, layero){ // 取消的逻辑 }, cancel: function(){ // 点击右上角的关闭按钮的逻辑 } }); }); } ``` 3. 在HTML文件中定义一个包含表单的div元素,并隐藏它。例如: ```html <div id="form" style="display:none;"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> </form> </div> ``` 4. 在按钮或链接的点击事件中调用弹窗表单的函数。例如: ```html <button onclick="openForm()">打开表单弹窗</button> ``` 这样就可以在点击按钮或链接时弹出一个包含表单弹窗。用户填写完表单后,可以点击提交按钮,调用相应的提交逻辑。如果点击取消按钮或者右上角的关闭按钮,则关闭弹窗
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值