layui弹框出from表单

代码示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>flask项目管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <!-- <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"> -->
        <link rel="stylesheet" href="../static/layui/css/layui.css">
        <!-- 依 赖 样 式 -->
		<link rel="stylesheet" href="../static/component/pear/css/pear.css" />
		<!-- 加 载 样 式 -->
		<link rel="stylesheet" href="../static/admin/css/loader.css" />
		<!-- 布 局 样 式 -->
    <style type="text/css">
      .icon {
         width: 1em; height: 1em;
         vertical-align: -0.15em;
         fill: currentColor;
         overflow: hidden;
      }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../static/admin/css/admin.css" />
        <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
        <link href="http://lyear.itshubao.com/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://lyear.itshubao.com/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="http://lyear.itshubao.com/css/animate.css" rel="stylesheet">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3766254_cmmobm4opu.css">
        <script src=//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js></script>
      </head>
 
<!-- 你的 HTML 代码 -->
<p></p>
<div class="layui-fluid">  
    <div class="layui-row">
      <div class="layui-col-md12">
        <div class="layui-col-md12">
            <!-- 面板 -->
            <div class="layui-panel">
              <div style="padding: 30px;">
                <h4>flask项目部署说明</h4><br>
                1.flask项目部署说明<br>
                1.flask项目部署说明<br>
                1.flask项目部署说明<br>
            
            </div>
            </div> 
      </div>
      
    </div>
</div>
      
</div>
<p></p>
        <!-- 表格开始 -->
    <div class="layui-fluid">  
        <div class="layui-row">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                  <div class="layui-panel">
                    <div style="padding: 30px;">
                        <button class="btn btn-success"  id="layerBtn">添加</button>
                        <div style="display: none" id="biaodan">
                            
                            <form class="layui-form" action="" onsubmit="return false">
                                <p></p>
                                <div class="layui-form-item">
                                  <label class="layui-form-label">名称</label>
                                  <div class="layui-input-block" style="width: 150px;">
                                    <input type="text" name="pjname" id="pjname" 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" style="width: 150px;">
                                    <input type="text" name="prfile" id="rfile" required  lay-verify="required" placeholder="启动文件,例如app.py" autocomplete="off" class="layui-input">
                                  </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">端口</label>
                                    <div class="layui-input-block" style="width: 150px;">
                                      <input type="text" name="port" id="port" required  lay-verify="required" placeholder="端口" autocomplete="off" class="layui-input">
                                    </div>
                                  </div>
                                <button style="display: none" id="submit" class="layui-btn" lay-submit lay-filter="submit">提交</button>
                              </form>
                          </div>
                          
                        <table class="layui-table">
                            
                            <thead>
                              <tr>
                                <th>项目名称</th>
                                <th>python版本</th>
                                <th>端口</th>
                                <th>启动方式</th>
                                <th>状态</th>
                                <th>添加时间</th>
                                
                              </tr> 
                            </thead>
                            <tbody>
                              <tr>
                                <td>贤心</td>
                                <td>贤心</td>
                                <td>贤心</td>
                                <td>贤心</td>
                                <td>贤心</td>
                                <td>2016-11-29</td>
                                
                              </tr>
                              
                            </tbody>
                          </table>
                    </div>
                  </div>   
                </div>
                
        </div>
    </div>
      
</div>



        <!-- 表格结束 -->

<script src="https://cdn.jsdelivr.net/npm/@ajiho/bootstrap-notify@1.0.1/dist/js/bootstrap-notify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../static/layui/layui.js"></script>
<script>
// 挂载layui,添加jquery和form 一会我们会用到
layui.use(['layer', 'jquery', 'form'], function () {
    // 这个时候将挂载到layui中的layer放置到一个变量上面,有助于我们调用
    var layer = layui.layer
    var $ = layui.jquery
    var form = layui.form
    var isSubOk = false
    var mengIndex = 0
    form.render(null, 'form')
    // 首先第一种调用方法就是(采用的是jquery的点击事件)
    $('#layerBtn').on('click', function (e) {
      // 调用的layer弹窗
      layer.open({
        type: 1,
        title: '添加项目',
        area: ['350px', '500px'],
        content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板,可以将其理解为指定一个组件,当然也是可以自己去写的,像'<div>我是一个内容</div>'
        btn: ['确认', '取消'],
        yes: function (index, layero) {
          // 获取当前蒙版层的索引
          mengIndex = index
          $('#submit').click()
        },
        btn2: function (index, layero) {
          layer.close(index)
        },
        // 打开弹窗的回调函数,用于回显页面数据
        success: function () {
          // 清除上一次的数据
          isSubOk = false
          $('#pjname').val('')
          $('#rfile').val('')
          $('#port').val('')
          console.log('我打开了弹窗')
        },
      })
    })
    // 表单提交事件
    form.on('submit(submit)', function (data) {
      isSubOk = true
      
      console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}

      // 我们可以再次发起请求
      // $.ajax   我在这里使用settimeout进行伪造一个异步请求
      $.ajax({
            url:"/flask_api",
            type:"POST",
            
            data: data.field,
              
    
            success:(data)=>{
                console.log(data);
                lightyear.notify(data, 'success', 5000, 'top', 'center');
                location.reload();
            }
        });

      return false //阻止表单跳转。如果需要表单跳转,去掉这段即可。
    })
  })

</script> 
</body>
</html>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞10赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容