要点：

字符串被渲染为弹窗层之后，回自动转换为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. 迭代器遍历【List、Set、Map】

    迭代器遍历[List.Set.Map] example package boom.collection; import java.util.ArrayList; import java.util.Ha ...

  2. js常用阻止冒泡事件

    原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...

  3. 关于C语言打印string类字符串的问题

    首先因为printf函数输出字符串是针对char *的,即printf只能输出c语言的内置数据,而string不是c语言的内置数据. 其次string类型的对象不止包含字符串,还包含了许多用于操作的函 ...

  4. python基础编程: 函数示例、装饰器、模块、内置函数

    目录: 函数示例 装饰器 模块 内置函数 一.函数示例: 1.为什么使用函数之模块化程序设计: 不使用模块程序设计的缺点: 1.体系结构不清晰,可主读性差: 2.可扩展性差: 3.程序冗长: 2.定义 ...

  5. zencart新增configuration商店全局变量sql

    将下面代码中的 '新增商店变量1', 'ADDS_NAME_1', '新增商店变量1的值', '新增商店变量1描述'换成你需要新增的内容即可. INSERT INTO `configuration` ...

  6. context:component-scan 注解的扫描

    <context:component-scan base-package="com.matt.cloud"/> bean-context中 spring.handler ...

  7. servlet 如何处理多请求访问以及线程讲解

    servlet 如何处理多请求访问以及线程讲解 场景:js循环500次请求同一个后台接口,接口内部逻辑:1.查询商品数量,2.扣减商品数量 ,那么该接口是否需要考虑多线程并发安全问题? 分析: 1.先 ...

  8. Alpha版本

    这个作业属于哪个课程 [课程链接][ https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/] 这个作业要求在哪里 [作业要求][ ...

  9. pycharm中报错：ImportError: No module named 'skimage'

    pycharm中直接setting是没办法成功的,会提示is requied C++ bool.....先进入那个页面安装好需要的tools,这个安装比较慢:http://landinghub.vis ...

  10. php类知识---try catch

    <?php try { echo "比赛开始"."\n"; ); } catch (Exception $e ) { echo "获取错误信息: ...