要点：

字符串被渲染为弹窗层之后，回自动转换为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. 《python解释器源码剖析》第8章--python的字节码与pyc文件

    8.0 序 我们日常会写各种各样的python脚本,在运行的时候只需要输入python xxx.py程序就执行了.那么问题就来了,一个py文件是如何被python变成一系列的机器指令并执行的呢? 8. ...

  2. 树莓派3B+一个外接显示器影响有线网卡无法启动的BUG

    在给一块用了不到一年的树莓派3B+重装官方系统时发现了一件诡异的事情,树莓派的有线网络会在重启后自动停掉,只有无线模块正常.即右上角的网络图标显示一个红叉叉. 在多次重装未果后,发现一个命令可以让有线 ...

  3. 6.Nginx的session一致性(共享)问题配置方案2

    1.利用memcached配置session一致性的另外一种方案tengine的会话保持功能 1.1:Tengine会话保持:通过cookie来实现的 该模块是一个负载均衡模块,通过cookie实现客 ...

  4. java8学习之BiFunction函数式接口实例演示&Predicate函数式接口详解

    BiFunction函数式接口: 在上次中已经对BiFunction接口进行了初步的认识,这里对它进一步学习,这里打算新建一个Person实体,然后新建若干个Person的实例存放在集合中,最后再根据 ...

  5. ${filename}用法二：

    假设:filename=/dir1/dir2/dir3/my.filename.txt 1.单一符号是最小匹配﹔两个符号是最大匹配. ${filename::}:提取最左边的5个字节:/dir1 ${ ...

  6. No message错误

    Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException No message 错误原因是因为表单提交的 ...

  7. sh_17_字符串的查找和替换

    sh_17_字符串的查找和替换 hello_str = "hello world" # 1. 判断是否以指定字符串开始 print(hello_str.startswith(&qu ...

  8. mysql5.7外网访问

    GRANT ALL PRIVILEGES ON *.* TO '账号名称'@'%' IDENTIFIED BY '密码' WITH GRANT OPTION; FLUSH PRIVILEGES; // ...

  9. 在vue中引入layer弹框的简易方法

    npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用lay ...

  10. CentOS7 升级Openssl的办法

    1.查看安装的版本 openssl version -a OpenSSL 1.0.2 2.下载 openssl-1.1.1.tar.gz,目前最新是1.1.1,可以通过修改版本号的方式下载最新版本 最 ...