精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui弹窗 form表单赋值的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui删除弹窗

    千次阅读 2019-08-16 23:20:08
    执行删除操作时,设置一个简单的弹出...button type="button" class="layui-btn layui-btn-danger" data-id='${rl.id}' data-type="test2">删除</button> <script> $(function () { // 监听删除点...

    执行删除操作时,设置一个简单的弹出提示框

    
    <button type="button" class="layui-btn layui-btn-danger" data-id='${rl.id}' data-type="test2">删除</button>
    
    <script>
            $(function () {
                // 监听删除点击事件,页面刷新就开始监听点击事件
                // 添加监听后,触发事件被触发,就会执行下面的代码
                $(document).on('click','.layui-btn-danger',function(e){
                    console.log($(e.target).data().id);
                })
    
                layui.use('layer', function(){
                    //触发事件
                    var active = {
                        test2: function(){
                            console.log($(this).data().id,"打印id")
    
                            // 获取id
                            var id=$(this).data().id
    
                            layer.confirm('您确定要删除吗?', {
                                btn: ['Yes','No'] //按钮
                            }, function(){
                                $.ajax({
                                    url:'/shop/delGather',
                                    type:'POST', //GET
                                    async:true,    //或false,是否异步
                                    data:{
                                        id:id,
                                    },
                                    timeout:5000,    //超时时间
                                    dataType:'json',    //返回的数据格式:json/xml/html/script/jsonp/text
                                    success:function(data){
                                        console.log(data);
                                        if (data.code=='000000'){
                                            window.location.reload();
                                            // 获得frame索引
                                        }else {
                                            data.code("删除失败");
                                        }
                                    },
                                    error:function(xhr,textStatus){
                                        console.log('错误')
                                        console.log(xhr)
                                        console.log(textStatus)
                                    },
                                    complete:function(){
                                        //console.log('结束')
                                    }
                                })
                            }, function(){
                                // 事务回调
                            });
                        }
                    };
                    // 选择选项设定
                    $('.layui-btn-danger').on('click', function(){
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });
                });
            })
        </script>
    

    效果如下图

    在这里插入图片描述

    展开全文
  • Layui设置弹窗

    2020-01-07 17:49:33
    <div id="addshow" style="display: none; text-align: center; padding-top: 10px;padding-right: 50px">...form class="layui-form" action="<%=Const.ROOT%>shetuan/add" method="post">...
    <div id="addshow"
    		style="display: none; text-align: center; padding-top: 10px;padding-right: 50px">
    		<form class="layui-form" action="<%=Const.ROOT%>shetuan/add"
    			method="post">
    			<div class="layui-form-item">
    				<label class="layui-form-label" style="width: 100px">
    					账号
    				</label>
    				<div class="layui-input-block">
    					<input type="text" name="t_number" lay-verify="required|number"
    						autocomplete="off" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label" style="width: 100px">
    					密码
    				</label>
    				<div class="layui-input-block">
    					<input type="password" name="t_pass" required
    						lay-verify="required" autocomplete="off" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label" style="width: 100px">
    					社团名称
    				</label>
    				<div class="layui-input-block">
    					<input type="text" name="t_society" required lay-verify="required"
    						autocomplete="off" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label" style="width: 100px">
    					管理员
    				</label>
    				<div class="layui-input-block">
    					<input type="text" name="t_name" required lay-verify="required"
    						autocomplete="off" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label" style="width: 100px">
    					电话号码
    				</label>
    				<div class="layui-input-block">
    					<input type="tel" name="t_phone" lay-verify="required|phone"
    						autocomplete="off" class="layui-input">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<div class="layui-input-block">
    					<button class="layui-btn" lay-submit lay-filter="formDemo">
    						添加
    					</button>
    					<button type="reset" class="layui-btn layui-btn-primary">
    						重置
    					</button>
    				</div>
    			</div>
    		</form>
    	</div>
    <script>
    layui.use(['laydate', 'laypage', 'layer', 'table','element'], function(){
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格
      ,element=layui.element;
      //弹窗
      $('#add').on('click', function(){
    				layer.open({
    					type: 1,
    					title: '标题',
    					content: $('#addshow'),
    					area: ['550px', '420px'],
    				});
      });
    });
    </script>

     

    展开全文
  • layui 日期弹窗点击小图标显示

    千次阅读 2019-09-18 13:31:40
    layui实现点击小图标显示日期弹窗 实现关键 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui点击图标显示弹窗</title> <...

    layui实现点击小图标显示日期弹窗

    实现关键

     

    完整代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>layui点击图标显示弹窗</title>
    		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css"/>
    	</head>
    	<style>
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.wrap{
    			margin:50px auto;
    			width: 200px;
    			height: 30px;
    			border: 1px solid #ccc;
    			position: relative;
    			border-radius: 3px;
    		}
    		.wrap input{
    			border: none;
    			width: 160px;
    			height: 28px;
    			padding-left: 10px;
    		}
    		.rq{
    			position: absolute;
    			right: 10px;
    			top: 5px;
    		}
    		
    	</style>
    	<body>
    		<div class="wrap">
    			<input type="text" id="time" autocomplete="off">
    			<img src="../img/rl.png" alt="" class="rq">
    		</div>
    
    		
    	</body>
    </html>
    <script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	layui.use('laydate', function(){
    		var laydate = layui.laydate;
    		//常规用法
    		  laydate.render({
    		    elem: '#time',
    			eventElem:".rq",
    			trigger: 'click'
    		  });
    	})
    </script>
    
    
    
    
    
    

     

    展开全文
  • 1:confim类型使用方法 layui.use('layer', function(){ layer.confirm('是否立即上传卷宗信息?', { btn: ['是','否'], time: 200000, //20s后自动关闭 },function(index){ ...

    1:confim类型使用方法

    layui.use('layer', function(){

    layer.confirm('是否立即上传卷宗信息?', {
        btn: ['是','否'],
        time: 200000, //20s后自动关闭
        },function(index){

                                                    alert("这是点击确定按钮走的回调")

        layer.close(index);
      },function(){
         alert("这是点击取消按钮走的回调")
      });
    })

    2:open类型弹框,content参数可以是一个选择器也可以是一个路径

    layer.open({
    type : 1,
    title : "借阅时间",
    area : [ '450px', '300px' ],
    content : $("#borrowCase"),
    btn: ['确定', '取消'],
    yes: function(index){
      alert("这是点击确定按钮走的回调")
    },
    btn2: function(){
       alert("这是点击取消按钮走的回调")
    },
    end:function(){
    alert('这是点击任一按钮都会走的回调')
    }

    });

    layui.use('layer',function(){
    var layer=layui.layer;
    layer.open({
    type:2,
    title:'新增字段信息',
    area:['450px','300px'],
    content: "dictionary/addFiled?dictionaryId="+dictionaryId//字段类型
    })
    })

    3:msg类型

    layer.msg('添加借阅成功', {
        time: 1500, //1500ms后自动关闭

      });

    4:关闭弹窗

    layer_close(index)关闭当前弹窗

    parent.layer.closeAll()关闭所有的弹窗


    ————————————————
    版权声明:本文为CSDN博主「ygy211715」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/ygy211715/article/details/79976559

    转载于:https://www.cnblogs.com/dayin1/p/11542389.html

    展开全文
  • layui常用弹窗和qrcode二维码生成

    千次阅读 2020-10-21 11:34:26
    layui 布局部分 与BootStrap很像,就是展示一些界面效果,此处省略。 弹出层 layer 步骤: 1. 下载layer , 并将解压后的layer文件夹 移动到项目中 2. 引入jquery.js 3. 引入layer.js layer - msg函数 用于弹出信息...
  • 如下所示: function open(t){ var id = $(t).attr("data-id"); var url = "{:U('home/.../...')}&id="+id; //弹出层 layer.open({ ... content: url, //弹窗打开的url ...(关闭弹窗后重新再获取新数据出来
  • 二、操作弹窗打开的子页面返回值 场景:此处小编的场景是操作ztree树,其实和操作列表都是一样的。通过点击增加按钮弹窗选择树节点,关闭窗口返回值 1、先说子页面 1-1、html代码 在body中只需要加以下一...
  • 所以我搭载了SpringBoot + LayUi 的框架 问题描述: 昨天我遇到的问题是,图标显示为方框 ,类似于这种: 但是我今天遇到了新的问题,类似于这种: 少了前面的笑脸表情 原因分析: 一开始我认为就是和昨天的情况...
  • 弹框的样式js代码 var IN,UI; // IN 当前dialog索引 var dat; // 判断新增站点气象信息和修改站点气象信息的依据 var form; layui.use([‘form’],...// 添加或者修改 form.on(‘submit(demoAjax1)’, function(data...
  • layUI弹窗layUI复选框

    2019-11-22 17:41:22
    layUI弹窗layUI复选框 layUI弹窗 $("#close1").click(function() { parent.layer.open({ type : 1, title : '提示', content : '<div style="text-align:center;line-height:100px;...
  • 最近升级老系统的海康视频到v1.4,遇到layui弹窗弹出的iframe视频框,不能随拖拽而变换位置。 问题是因为海康视频插件不支持随屏幕变化而自适应。需要手动控制。文档中已明确指出。 修改后的代码已上传github 需要...
  • layui弹窗

    2018-09-23 15:40:00
    >添加 " text/javascript " > layui.use( ' layer ' , function(){ // 独立版的layer无需执行这一句 var $ = layui.jquery, layer = layui.layer; // 独立版的layer无需执行这一句 }); var ...
  • springboot+layui+jquery+layui弹窗

    千次阅读 2018-07-05 10:33:30
    layui 的增删改查 。。。 废话不多说上代码由于时间原因 暂时只实现了查询的后台完整代码其他的会之后贴出来 其实与查询相似 有需要的可以等我贴出 也可以照着查询仿写先展现效果前台代码body&gt; &lt;...
  • 使用iframe进行嵌套页面,需求要在iframe内点击按钮,出现弹窗,但是实现中发现这个弹窗只覆盖了子页面,父页面内容仍可点击。 要实现覆盖整个页面,这里就需要用到layui中的方法,parent.layer.open({})。在父级...
  • layui弹窗体会

    2020-09-10 11:31:34
    写demo的时候遇到了多个弹窗的问题和弹窗刷新的问题: ...弹窗的刷新,就是清除原始窗口页面元素,重新添加元素 jquery的remove清除节点的时候,不会清除节点绑定的事件(再次生成新元素的时候会自动绑定事件) ...
  • layui 弹窗 分页

    2021-04-30 20:43:28
    职位 入职日期 薪资 奖金 所属部门 ${department.dname} 添加 重置 ; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ...
  • layui框架+JavaScript动态添加信息(包含省市县三级下拉框)以及删除功能。 获取到最终表单值。 注:未添加正则校验。 思路与坑 尝试过用layui框架中的表单取值,但是不知道是不是因为动态添加的缘故,框架的表单...
  • Layui弹窗中使用下拉框,当显示选项时,弹窗会出现滚动条。 解决方案:给弹窗加上:overflow:visible,即可解决该问题。
  • layui弹窗被遮罩成灰色,无法操作的问题只需要添加shade:0属性 只需要添加shade:0属性
  • layui弹窗和关闭

    2021-08-20 21:25:14
    弹窗 <div id="biaodan" style=""> 内容 </div> 弹窗 layer.open({ type: 1, title: '编辑', area: ['80%', '80%'], shade: 0, content: $('#biaodan'), end : function() { ...
  • vue使用layui弹窗

    千次阅读 2020-03-25 18:29:26
    // data参数可认为是componentName的props,同时 该方法会自动添加一个key为layerid的值, 该值为创建层的id, 可以直接用来关闭该层 // options参数直接写到json里即可,比如title layer.open(options);...
  • layui 的增删改查 。。。 废话不多说上代码 由于时间原因 暂时只实现了查询的后台完整代码 其他的会之后贴出来 其实与查询相似 有需要的可以等我贴出 也可以照着查询仿写 先展现效果 前台代码 ...
  • 问题描述:layui弹窗后按enter键不停的弹出,背景变得越来深 解决办法一:如图 解决办法二:(一个姓杨的大腿解决)
  • Layui 弹窗 -全面使用

    万次阅读 2019-09-15 21:31:09
    类型:String/DOM/Boolean,默认:'.layui-layer-title',即默认是触发标题区域拖拽。 如果你想单独定义,指向元素的选择器或者DOM即可。如 move: '.mine-move' 。 还可以配置设定 move: false 来禁止拖拽 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,215
精华内容 486
关键字:

layui添加弹窗