-
js layui 弹出子窗体_jquery layui弹出层使用详解
2020-12-21 09:28:52这次给大家带来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; });
-
layui弹出层样式修改,使用css的background属性设置多个背景图附件
2021-02-24 11:23:07切图附件 -
关于jquery layui弹出层的使用方法
2021-01-19 16:39:51Jquery必须大于1.83 ...input id=about type=button value=修改考勤 class=layui-btn layui-btn-normal /> 主要js代码 [removed] $('input#about').on('click', function () { layer.confirm('是 -
css修改layui的下拉框样式 js_layui 弹出框改变按钮颜色样式 自定义皮肤
2020-12-31 09:57:051.在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
2020-10-27 10:27:55在使用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不需要执行,我在自己写的时候,,,少写了一句话,所以最好还是复制吧,这个问题出现的频率太少了,网上都找到不到。。。
PS:layui 的三大独立组件:layer 通用型弹出层(这就是官方文档中说的独立版layer,不需要上诉语句);layDate 日期与时间组件;layim 网页即时通讯;
请注意:如果你不想使用 layui,而只是要单独使用上述组件,你必须采用组件的独立包(去组件各自的官网下载)
网址:https://www.layui.com/alone.html -
layui 弹出层的表单提交
2017-06-26 11:07:52layui是一个最近挺火的前端框架,公司新的...最困扰我的是一个弹出层的表单提交问题:layer.open({ type: 2, title: ['个人资料-修改','font-size:13px;margin-top:10px;'], content:con,//con是Ajax返回的页面 bt -
layui弹窗间的传值(layui弹出层传值)(窗口传值)
2019-04-04 10:07:171、从主窗口传值到弹出层 2、从弹出层传值到主窗口 1、从主窗口传值到弹出层 首先时js changefileone函数时按钮绑定事件,按钮点击后调用这个函数然后弹出弹出层,加载changefile.html界面 然后success提前加载... -
layui弹出层样式修改,使用css的background属性设置多个背景图
2021-02-24 10:34:444、使用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.... -
Layui弹出层关闭后再次闪现一个弹出层的框问题
2019-07-17 18:05:03本人后端开发菜鸟,按照测试的要求需要修改问题,主要问题是弹出层关闭后,会闪现一个小框,截图发现,这个小框是这个弹出层无内容后的框,经过好久的检查后发现问题并总结方法 两种方法: 1、可能是弹出层的大小... -
layui弹出层,数据回显
2020-04-06 18:45:151、效果图 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('... -
layui弹出框父子页面值得传递
2018-11-02 11:29:41title: ['修改规格', 'textalign:center'], area: ['800px', '500px'], shade: 0.5, maxmin: true, offset: [60, 0], content: '/pinyougou-h5/businessManager/spe... -
使用layui 弹出div全屏不可选择与导航栏问题
2019-10-14 11:47:27用户第一次登录 判断是否是新用户 是新用户的话弹出 需要修改信息 这个div一直在 怎么让用户只可以点击这个企业信息页面div里面的东西其他的不可以点击 ``` -
layui弹出层iframe父页面操作子页面
2019-12-05 11:24:22var index = layer.open({ ... title: ["修改", "background-color:#1E9FFF;color:#fafafa;"], area: ['100%', '100%'], content: './pages/commodityPreferenceStrategy_edit.html', succes... -
layui表格弹窗修改_layui 增删改查 弹出框
2021-01-17 11:13:58 -
Layui 关于在使用Layui弹出层的时候,弹两个窗口时再使用第二次弹窗的时候导致窗口不能点击
2018-10-05 00:55:57原因是因为我做的添加和修改是在同一个窗口中,但是由于我在第一层的窗口中的一个按钮需要调用打开第二层窗口,所以就导致在代码上一个按钮绑定了两次click时间,在第一次使用过后,再去使用的时候会导致第一次的事件也... -
layui table 弹出层刷新_求助 - layui的数据表格利用弹出窗体表单修改数改之后表格如何更新...
2020-12-23 16:26:581### 问题描述开发一个模块,用到了layui的数据表格, 绑定数据表格工具条之后需要使用layui弹出层弹出一个表单来修改某个条目的各种数据,请问在表带提交修改完成之后,如何刷新对应条目在数据表格中的值呢?... -
layui字体样式设置_layui的弹出框msg修改字体按钮样式
2020-12-30 05:16:22调整layui的弹出框msg的字体大小以及其他样式//文本里面可以加html标签let sure = layer.msg('确定喜欢她吗?', {time: 0 //0表示不自动关闭 ,time自动关闭所需毫秒 ,单位是毫秒(1秒=1000毫秒), btn: ['确定', '取消... -
layui中修改页面layer.open弹出层给radio赋值
2020-03-23 12:14:35layui中修改页面layer.open弹出层给radio赋值 最近使用layui做了个简单的项目,遇到了个问题,在layui.table渲染页面做修改的时候,使用的是弹出层,要把值赋给radio的时候总是渲染不上去。现在解决了这个问题,... -
Layui 如何获取弹出框元素,如何修改样式(包含按钮,Title)
2020-09-09 19:53:49Layui 弹出框 如何修改样式 本文是适用于 弹出框格式是采用 字符串拼接的方式;success() 函数会在弹出框加载完成之后加载,但是并不能直接通jQuery:$('.XXXXX') 获取弹出框样式里面的dom元素,可以直接通过... -
Layui中layer弹出层右上角X关闭按钮样式修改
2020-09-24 16:17:33Layui中layer弹出层右上角X关闭按钮样式修改 由于项目刚好用到layer弹出层,于是我使用了layer.open()做了一个页面层的弹出效果,但是在做的过程中我发现右上角的关闭按钮并不是自己想要的样式,于是对以下代码进行... -
layUI layer.open弹出层增加修改按钮的样式
2019-12-10 09:40:56方法一:全局修改应用样式(css中修改) //全局修改 在css增加样式 //如果有四个按钮 //class:.layui-layer-btn .layui-layer-btn0 //.layui-layer-btn .layui-layer-btn1 //以此类推 或者去网页查看class名字 ....