layui弹出层处理(获取、操作弹出层数据等)

 

要点:

字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作

 

DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>开始使用layuititle>
        <link rel="stylesheet" href="/css/layui.css">
    head>
    <script type="text/javascript" src="layui/layui.all.js">script>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js">script>

    

      


    <body>
        
        <div>
            aa
        div>
        <button id="start" data-method="setTop" class="layui-btn">显示弹出层button>

    <script>
    

         $(function(){
             
             //打开弹窗
             $("#start").on("click",function(){
                f1();
            });
             
             //添加文件名称按钮
             $(document).on("click", "#add", function () {
                 var name = $("#doc_name").val();
                 if(!name){
                     alert("请输入正确文件名称!");
                     return;
                 }
                 
                 var s = `
                     <div class="remove">
                        <span class="names">${name}</span>
                        <button class="layui-btn">移除</button>
                    </div>
                `;
                $("#name_list").append(s);
                $("#doc_name").val("");
            
            });
             
             //移除当前文件名
             $(document).on("click", ".remove", function () {
                $(this).remove();
            });
             
             
        });
             
    
        function f1(){
            
            //弹出层内容
            var s = `
                <div id="layer1" >
                        <div class="layui-input-inline">
                            <label class="layui-form-label">文件名:</label>
                              <input id="doc_name" type="text" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                              <button class="layui-btn" id="add">添加</button>
                        </div>
                    <label class="layui-form-label">待入库文件:</label>
                    <div id="name_list" class="layui-inline">
                        
                    </div>
                </div>
            `;
            
            //打开弹出层
            layer.open({
              type: 1,
              skin: 'layer-cover', 
              area: ['900px', '470px'],
              anim: 5,
              title: "xx文件入库",
              content: s,
              btn: ['入库'],
              yes: function(){
                //执行入库方法
                var arr = [];
                $(".names").each(function(i){
                   var name = $(this).text();
                   arr.push(name);
                })
                alert(arr);
             },
              btnAlign: 'c',
              shadeClose:'true',
              end: function(index, layero){
                  
              }
            });
            
        }
    
    
    
    script>

html>

 

转载于:https://www.cnblogs.com/libin6505/p/10870166.html

你可能感兴趣的:(layui弹出层处理(获取、操作弹出层数据等))