精华内容
下载资源
问答
  • 这次给大家带来jquery layui弹出层使用详解,jquery layui弹出层使用的注意事项有哪些,下面就是实战案例,一起来看一下。Jquery必须大于1.83layui必须是all,否则不显示html代码主要js代码$('input#about').on('...

    这次给大家带来jquery layui弹出层使用详解,jquery layui弹出层使用的注意事项有哪些,下面就是实战案例,一起来看一下。

    Jquery必须大于1.83

    layui必须是all,否则不显示

    html代码

    主要js代码

    $('input#about').on('click', function () {

    layer.confirm('是否要修改123的考勤?', {

    btn: ['确定', '取消', ] //按钮

    },

    function () {

    layer.msg('修改成功', { time: 800, icon: 1 });

    // layer.msg('网络连接失败', { time: 800, icon: 2 });

    },

    function () {

    layer.msg('未作任何修改', {

    time: 800, //20s后自动关闭

    });

    }

    );

    });

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • Layui弹出修改删除

    千次阅读 2019-08-16 18:20:18
    班级修改和删除(修改用到了弹出层) 弹出层页面 <div class="layui-input-block layui-form" id="modifyClass" lay-filter="updateClass" style="margin-top: 30px""> <form class="layui-...

    班级修改和删除(修改用到了弹出层)

    在这里插入图片描述

    • 弹出层页面
    <div class="layui-input-block layui-form" id="modifyClass"
    		lay-filter="updateClass" style="margin-top: 30px"">
    		<form class="layui-form" action="" lay-filter="example">
    			<div class="layui-form-item">
    				<div class="layui-inline">
    					<label class="layui-form-label">年级</label>
    					<div class="layui-input-inline">
    						<input type="text" class="layui-input" name="grade1" id="grade1"
    							placeholder="例:2016" readonly="true">
    					</div>
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">班级编号</label>
    				<div class="layui-input-inline">
    					<input type="text" name="classid1" required lay-verify="required" readonly="true"
    						placeholder="请输入班级编号" autocomplete="off" class="layui-input"
    						id="classid1">
    				</div>
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">班级名称</label>
    				<div class="layui-input-inline">
    					<input type="text" name="classname1" id="classname1" required
    						lay-verify="required" placeholder="请输入班级名称" autocomplete="off"
    						class="layui-input">
    				</div>
    				<!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
    			</div>
    			<div class="layui-form-item">
    				<label class="layui-form-label">专业</label>
    				<div class="layui-input-inline">
    					<select name="majorid" lay-verify="required" id="majorid1"
    						lay-filter="majorid1">
    						<option value="">请选择</option>
    					</select>
    				</div>
    			</div>
    
    			<div class="layui-form-item">
    				<div class="layui-input-block">
    					<button class="layui-btn" lay-submit="" lay-filter="enmodify">确认修改</button>
    				</div>
    			</div>
    		</form>
    	</div>
    
    • 主页面的js(其中content: ‘./displayClass.html’, 即为引入弹出层页面;success: function(layero, index){…} …即为给弹出层页面内容赋值)
    //监听 修改、删除行事件
    	table.on('tool(table1)',function(obj){
    	    var data1 = obj.data;
    	  	if(obj.event === 'del'){
    	      	layer.confirm('想好要删除了么?', function(index){
    	    	  	$.ajax({
    	    			url:"../../ClassesDeleteServlet",
    	    		  	data:{"classid": data1.classid},
    	    			type:"post",
    	    			dataType:"json",
    	    		  	success:function (data) {
    	    			 	if (data == 0) {
    	    				    layer.msg('删除失败!',{icon:5,offset:"auto",time:2000});//提示框
    					  	}else{
    						    layer.msg('删除成功!',{icon:6,offset:"auto",time:2000});//提示框
    					  	}
    	    		 	}  
    	    	 	});  
    	            return false; 
    	     	});
    	    } else if(obj.event === 'edit'){
    	    	layer.open({
    	    		type: 2
    	    		,title: "修改班级信息"
    	    		,area: ['45%', '70%']
    	    		,content: './displayClass.html',
    	    		success: function(layero, index){
    	    			var body = layer.getChildFrame('body', index);
    	    		    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
    	    		    body.find('#classid1').val(data1.classid);
    	    		    body.find('#classname1').val(data1.classname);
    	    		    body.find('#grade1').val(data1.grade);
    	    		    
    	    		    //为弹框页面专业下拉框赋值
    	    		    $.ajax({
    	    				url : '../../MajorFindAllServlet?deptid=5',
    	    				dataType : 'json',
    	    				data : {
    	    					'state' : 0
    	    				}, //查询状态为正常的所有机构类型
    	    				type : 'post',
    	    				success : function(data) {
    	    					$.each(data, function(index, item) {
    	    						if (item.majorid == data1.majorid) {
    	    							body.find('#majorid1').append($("<option>").attr("value",item.majorid).attr("selected","selected").text(item.majorname));
    								}else  {
    									body.find('#majorid1').append($("<option>").attr("value",item.majorid).text(item.majorname));
    								}
    	    					});
    	    					iframeWin.layui.form.render("select");
    	    				}
    	    			});
    	    		  }
    	    	 });
    	    };
    	})
    
    • 弹出层提交表单监听(layer.msg(‘修改成功!’,{icon:6,offset:“auto”,time:2000});//提示框2秒自动消失)
    form.on('submit(enmodify)',function(data){
    				$.ajax({
    					url:'../../ClassUpdateServlet',
    					data:{
    						classid:$("#classid1").val(),
    						classname:$("#classname1").val(),
    						grade:$("#grade1").val(),
    						majorid:$("#majorid1").val()
    					},
    					success:function(data){
    						if (data == 0) {
    							layer.msg('修改失败!',{icon:5,offset:"auto",time:2000});//提示框
    						}else  {
    							layer.msg('修改成功!',{icon:6,offset:"auto",time:2000});//提示框
    						}
    						
    						setTimeout(function(){
    							var index = parent.layer.getFrameIndex(window.name);
    							parent.layer.close(index);//关闭弹出层
    							parent.location.reload();//重新加载父页面表格
    						}, 2100);
    					}
    				})
    				return false;
    			});
    
    展开全文
  • 切图附件
  • Jquery必须大于1.83 ...input id=about type=button value=修改考勤 class=layui-btn layui-btn-normal /> 主要js代码 [removed] $('input#about').on('click', function () { layer.confirm('是
  • 1.在layer下新建文件夹和css 文件:2.123.cssbody .layui-ext-yourskin .layui-layer-btn0{border-color: #55ff83;background-color: #5aff53;color: #4736ff;}3.123.html文件Title一个标准的按钮layui.use(['form','...

    1.在layer下新建文件夹和css 文件:

    2.123.css

    body .layui-ext-yourskin .layui-layer-btn0{

    border-color: #55ff83;

    background-color: #5aff53;

    color: #4736ff;

    }

    3.123.html文件

    Title

    一个标准的按钮

    layui.use(['form','layer','jquery'], function(){

    var form = layui.form;

    var layer=layui.layer;

    var $=layui.jquery;

    layer.config({

    extend: 'zidiny/123.css' //同样需要加载新皮肤

    });

    $("#button").click(function () {

    layer.open({

    title: '在线调试'

    ,skin: 'layui-ext-yourskin' //只对该层采用myskin皮肤

    ,content: '可以填写任意的layer代码'

    });

    })

    });

    4.效果

    展开全文
  • 在使用layui弹出层时,浏览器出现报错:TypeError: layer.open is not a function 报错错误如图: 修改: 添加 var layer = layui.layer; var $ = layui.jquery; 如图: layui弹出层的官方文档上提到过这句话,...

    在使用layui弹出层时,浏览器出现报错:TypeError: layer.open is not a function
    报错错误如图:

    出错
    修改:
    添加

    var layer = layui.layer;
    var $ = layui.jquery;
    

    如图:
    修改

    layui弹出层的官方文档上提到过这句话,但是注释了独立版layer不需要执行,我在自己写的时候,,,少写了一句话,所以最好还是复制吧,这个问题出现的频率太少了,网上都找到不到。。。
    layui官方文档

    PS:layui 的三大独立组件:layer 通用型弹出层(这就是官方文档中说的独立版layer,不需要上诉语句);layDate 日期与时间组件;layim 网页即时通讯;
    请注意:如果你不想使用 layui,而只是要单独使用上述组件,你必须采用组件的独立包(去组件各自的官网下载)
    网址:https://www.layui.com/alone.html

    展开全文
  • layui 弹出层的表单提交

    万次阅读 2017-06-26 11:07:52
    layui是一个最近挺火的前端框架,公司新的...最困扰我的是一个弹出层的表单提交问题:layer.open({ type: 2, title: ['个人资料-修改','font-size:13px;margin-top:10px;'], content:con,//con是Ajax返回的页面 bt
  • 1、从主窗口传值到弹出层 2、从弹出层传值到主窗口 1、从主窗口传值到弹出层 首先时js changefileone函数时按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面 然后success提前加载...
  • 4、使用backgound可以设置多个背景图的特性,设置九个分区的背景图 完事代码 .layui-layer,.layui-layer-title{ background-color: transparent !important; color: white !important; border-bottom: 0px solid #...
  • layui 弹出层和提交表单

    万次阅读 2018-07-18 11:43:14
    在点击修改按钮的时候,content 路径CPTL/ +curId ,路径中的curid 是当前信息的ID,弹窗跳出当前的数据信息   2.  把提交的按钮写在子页面里面,这里没有用layui 自带的yes:function(),   3....
  • 本人后端开发菜鸟,按照测试的要求需要修改问题,主要问题是弹出层关闭后,会闪现一个小框,截图发现,这个小框是这个弹出层无内容后的框,经过好久的检查后发现问题并总结方法 两种方法: 1、可能是弹出层的大小...
  • layui弹出层,数据回显

    千次阅读 2020-04-06 18:45:15
    1、效果图 2、具体操作 function openUpdateEquipmentAccident(data) {//data为当前行数据,即点击修改的那一行 ... title: '修改人身事故信息', content: $("#updateDiv"), area: ['80...
  • layui弹出层按钮回调

    2020-08-02 21:26:34
    ,content: ‘导入数据有错误,请查看下载文件列表中错误导出文件数据,修改后重新上传’ ,btn: [‘确认’] , success: function () { window.location.href = excelUrl; } ,yes: function(index, layero){ window....
  • layui弹出修改颜色

    千次阅读 2020-04-16 17:09:16
    本人在开发后台页面的时候,提示用户批量删除的数据时,为了惊醒一点儿先把文字改成红色提醒,看了layui文档,... 如图所示用layer.style来修饰,后面的XXX是你定义的弹出层变量名,如 var index= layer.confirm('...
  • title: ['修改规格', 'textalign:center'], area: ['800px', '500px'], shade: 0.5, maxmin: true, offset: [60, 0], content: '/pinyougou-h5/businessManager/spe...
  • 用户第一次登录 判断是否是新用户 是新用户的话弹出 需要修改信息 这个div一直在 怎么让用户只可以点击这个企业信息页面div里面的东西其他的不可以点击 ```
  • var index = layer.open({ ... title: ["修改", "background-color:#1E9FFF;color:#fafafa;"], area: ['100%', '100%'], content: './pages/commodityPreferenceStrategy_edit.html', succes...
  • 原因是因为我做的添加和修改是在同一个窗口中,但是由于我在第一层的窗口中的一个按钮需要调用打开第二层窗口,所以就导致在代码上一个按钮绑定了两次click时间,在第一次使用过后,再去使用的时候会导致第一次的事件也...
  • 1### 问题描述开发一个模块,用到了layui的数据表格, 绑定数据表格工具条之后需要使用layui弹出层弹出一个表单来修改某个条目的各种数据,请问在表带提交修改完成之后,如何刷新对应条目在数据表格中的值呢?...
  • 调整layui弹出框msg的字体大小以及其他样式//文本里面可以加html标签let sure = layer.msg('确定喜欢她吗?', {time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒(1秒=1000毫秒), btn: ['确定', '取消...
  • layui修改页面layer.open弹出层给radio赋值 最近使用layui做了个简单的项目,遇到了个问题,在layui.table渲染页面做修改的时候,使用的是弹出层,要把值赋给radio的时候总是渲染不上去。现在解决了这个问题,...
  • Layui 弹出框 如何修改样式 本文是适用于 弹出框格式是采用 字符串拼接的方式;success() 函数会在弹出框加载完成之后加载,但是并不能直接通jQuery:$('.XXXXX') 获取弹出框样式里面的dom元素,可以直接通过...
  • Layui中layer弹出层右上角X关闭按钮样式修改 由于项目刚好用到layer弹出层,于是我使用了layer.open()做了一个页面层的弹出效果,但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式,于是对以下代码进行...
  • 方法一:全局修改应用样式(css中修改) //全局修改 在css增加样式 //如果有四个按钮 //class:.layui-layer-btn .layui-layer-btn0 //.layui-layer-btn .layui-layer-btn1 //以此类推 或者去网页查看class名字 ....

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 170
精华内容 68
关键字:

layui弹出修改