要点：

字符串被渲染为弹窗层之后，回自动转换为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. 微软宣布加入机密计算联盟，与谷歌和BAT 等巨头联手保护数据安全

    联盟创始成员还包括阿里巴巴.Arm.百度.谷歌.IBM.英特尔.红帽.瑞士电信和腾讯等科技公司,它提供了一个让行业聚集起来的机会,以促进使用机密计算来更好地保护数据. 建立机密计算联盟的需求源于这样一 ...

  2. C++ 新特性 笔记

    摘录 constexptr C++14尝鲜:constexpr函数(编译期函数) 总结来说,就是在c++11之前,要实现编译期数值计算需要繁琐的模板元编程.在c++11 中,可以是函数,在一句rutu ...

  3. zencart更改css按钮的宽度css buttons

    includes\functions\html_output.php 大概323行的zenCssButton函数 function zenCssButton($image = '', $text, $ ...

  4. Blend Visual studio 和Visual studio 的区别

    blend for visual studio 这个并不是用于开发中写代码的,而是专门用来做WPF的界面设计的.这是为了让专业的人做专业的事,尽量让写代码的人只使用visual studio,而做界面 ...

  5. Vue双向绑定的实现原理系列（四）：补充指令解析器compile

    补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...

  6. Oracle之：Function ：numberToDate()

    create or replace function numberToDate(i_date in number) return date is v_date number; result date ...

  7. Acwing-165-小猫爬山(搜索)

    链接: https://www.acwing.com/problem/content/167/ 题意: 翰翰和达达饲养了N只小猫,这天,小猫们要去爬山. 经历了千辛万苦,小猫们终于爬上了山顶,但是疲倦 ...

  8. hdu 5791 Two 二维dp

    Two Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submiss ...

  9. PHP处理kafka消息队列

    在安装php-kafka 扩展后,就可以开始编写 php 消费消息的脚本了,php-rdkafka 扩展提供了几种消息处理的方式 低级方式(Low level) 这种方式没有消费组的概念 <?p ...

  10. js判断是否是app，及版本号

    判断是否是android,ios,qq,wetchat export const Config = {}; Config.ua = navigator.userAgent.toLowerCase(); ...