要点：

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <title>开始使用layui</title>

        <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>

<!--     * 从官网下载的layui包中解压后内容如下

     * ├─css //css目录

      │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）

      │  │  ├─laydate

      │  │  ├─layer

      │  │  └─layim

      │  └─layui.css //核心样式文件

      ├─font  //字体图标目录

      ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）

      │─lay //模块核心目录

      │  └─modules //各模块组件

      │─layui.js //基础核心库

      └─layui.all.js //包含layui.js和所有模块的合并文件

      * 这里要十分注意的是，我们测试的代码中引入layui的js要引入 layui.all.js，否则某些功能会无效-->

    <body>

        <!-- 你的HTML代码 -->

        <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>

layui弹出层处理（获取、操作弹出层数据等）的更多相关文章

  1. 使用cookies弹出层每24小时弹出一次

    第一步:下载cookies的库 https://github.com/js-cookie/js-cookie 第二步:设置Cookies的失效时间,这里有两种方法,按天计算和按小时计算 functio ...

  2. layui 弹出层监听 判断弹出框的大小

    if ($.PublicIsMobile($(window).width())) { var layerInitWidth = $("#layui-layer" + ly_dtxm ...

  3. layer弹出层无法关闭问题

    parent.layer.closeAll();如果关闭指定弹出层,获取对应弹出层的索引,进行关闭

  4. layui在open弹出层回显，解决动态select数据回显问题

    //监听数据表格工具条         table.on('tool(contentList)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 l ...

  5. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  7. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  8. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. 弹出层和ajax数据交互

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  10. 用jQuery解决弹出层的问题

    在BS 项目中 经常需要用到这种弹出层.做这种弹出层一般都会遇到下面几个问题:0,弹出层必须定义在input的下边显示.1,点击input弹出div层.2,点击div层外面任何地方,关闭div层.3, ...

随机推荐

  1. raise与raise······from

    在python中,如果想手动引发一个异常,我们一般都会使用raise # -*- coding:utf-8 -*- # @Author: WanMingZhu # @Date: 2019/10/22 ...

  2. NB-IOT无线帧结构和下行物理信道

    NB-IOT Downlink OFDM参数 1.下行基于OFDMA, FF点数=128,基带采样速率1.92MHz,子载波间距15kHz,有效带宽180kHz=1PRB OFDMA: 正交频分多址, ...

  3. 建立一个能持续处理的C/S网络程序

    程序流程图: 代码演示: 服务器端: #include<WinSock2.h> #include<Windows.h> #include<stdio.h> #inc ...

  4. 寒武纪C++日常实习生面经（其他人面试题）

    1.C++继承方式? 答:public,protected,private三种继承方式和虚继承一共四种. 派生类可以继承定义在基类中的成员,但是派生类的成员函数不一定有权访问从基类继承而来的成员. 派 ...

  5. CSS基础学习-5.CSS属性_字体文本文本装饰

  6. 系统的学习Devops

    系统的学习devops 1. 学习一门编程语言 Java python JavaScript 2.了解不同的操作系统概念 线程和并发,套接字,I/O管理,虚拟化,内存存储和文件系统 3.掌握终端生存大 ...

  7. Unicode规范中的BOM 和 ISO8891-1编码

    Unicode规范中的BOM Unicode规范中有一个BOM的概念.BOM——Byte Order Mark,就是字节序标记.在这里找到一段关于BOM的说明: 在UCS 编码中有一个叫做" ...

  8. 【Python之路】特别篇--Python装饰器

    前情提要 1. 作用域 在python中,函数会创建一个新的作用域.python开发者可能会说函数有自己的命名空间,差不多一个意思.这意味着在函数内部碰到一个变量的时候函数会优先在自己的命名空间里面去 ...

  9. psd缩略图生成上传解决方案

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  10. Linux和其他机器共享文件

    在实际当中,Linux服务器在公网上,我们的windows电脑在局域网中,因此这个共享并不实际. 安装vsftpd 注:安装之后需要验证ftp是否工作,这时应该在本机验证,而不应该在windows电脑 ...