要点：

字符串被渲染为弹窗层之后，回自动转换为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. BZOJ 1016 生成树计数

    现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的).由于不同的最小生成树 ...

  2. unique() sstream

    sstream ss()自动去除空格 例: string a="1 2 3 4 5; getline(cin,a); sstream ss(a); while(ss>>b) { ...

  3. Vim常用插件命令手册

    此文章记录了,笔者使用的插件中的主要命令. junegunn/vim-plug :PlugInstall 安装插件 :PlugClean 清理插件 :PlugUpgrade 升级插件管理器 :Plug ...

  4. WIF配置说明

    <configuration> <configSections> <!--添加 WIF 4.5 sections :如下两条--> <section name ...

  5. 快速傅立叶变换FFT模板

    递归版 UOJ34多项式乘法 //容易暴栈,但是很好理解 #include <cmath> #include <iostream> #include <cstdio> ...

  6. 部署LVS-NAT模式调度器

    创建集群服务器 [root@proxy ~]# yum -y install ipvsadm [root@proxy ~]# ipvsadm -A -t -s wrr 添加真实服务器 [root@pr ...

  7. mina客户端发送消息延迟问题分析

    原文:http://www.cnblogs.com/haiq/archive/2011/08/01/2124292.html (写的蛮好,保存下来) 由于项目需要,用到了 mina 框架进行 tcp ...

  8. Java的当中的泛型

    Java当中的泛型 01 import java.util.ArrayList; import java.util.List; public class Demo{ public static voi ...

  9. 用python进行服务器的监控

    用python进行服务器的监控 在linux服务器中,一切皆为文件,就是说,服务器运行的个中信息,其实是可以从某些文件中查询得到的:百度后,你会知道,在Linux系统中,有一个/proc的虚拟文件系统 ...

  10. [CSP-S模拟测试]:联合权值·改（暴力）

    题目传送门(内部题143) 输入格式 输入文件的第一行为三个整数$n,m,t$.其中$t$是数据类型. 接下来$m$行,每行两个正整数$u,v$,表示图中的一条边.数据保证不存在重边或自环的情况.   ...