输入框 弹出框 notify alert prompt confirm dialoger toast layer.alert .msg .load .open wx.showModal

IDEA-layer方式一layer.alert()layer.alert(当前行的下标: row.username, {icon: 0});icon0 1 2 3 4 5 6 701234567layer.alert(data.msg, { icon: 1, yes: function(){ // 退出登录 $.ajax({ url: /logout, type: post, data: {}, async: true, // true为异步false为同步 success: function(data) { // 刷新页面 location.reload(); } }); } });方式二layer.msg()layer toast效果layer.msg 设置几秒钟后关闭打开的iframe层//默认3秒后关闭layer.msg(操作成功,{time: 2000});layer.msg(操作成功); layer.msg(操作成功,{time: 2000}); layer.msg(操作成功,{icon: 6}); layer.msg(操作成功,{icon: 6, time: 2000}); layer.msg(操作成功,{time: 2000},function(){ //do something });参考Layui 内置方法 - layer.msg提示框_阿甘兄-CSDN博客_layer.msglayer.msg(只想弱弱提示); layer.msg(有表情地提示, {icon: 6}); layer.msg(关闭后想做些什么, function(){ //do something }); layer.msg(同上, { icon: 1, time: 2000 //2秒关闭如果不配置默认是3秒 }, function(){ //do something });参考layer.msg 设置几秒钟后关闭打开的iframe层_大海无量的博客-CSDN博客layer.msg(操作成功,{ time: 2000 },function(){ //先得到当前iframe层的索引 var iframe_index parent.layer.getFrameIndex(window.name); //console.log(当前iframe层的索引: iframe_index window.name: window.name); //再执行关闭 parent.layer.close(iframe_index); });指定弹出位置layer.msg(审核成功,{offset: 300px});方式三layer.confirm(回车确定)//删除 layer.confirm(是否删除记录, { icon: 0, success: function () { //释放焦点,解决回车时无限弹出的问题 $(:focus).blur(); //回车确定 this.enterEsc function (event) { if (event.keyCode 13 || event.keyCode 32) { $(.layui-layer-btn0).click(); return false; //阻止系统默认回车事件 }else if(event.keyCode 27){ $(.layui-layer-btn1).click(); return false; } }; $(document).on(keydown, this.enterEsc); //监听键盘事件 }, end:function(){ $(document).off(keydown,this.enterEsc); //解除键盘关闭事件 } }, function() { //执行 $.ajax({ url: /configProduct/deleteConfigProductById, type: post, data: {id: row.productId}, async: true,//true为异步false为同步 complete: function() { $(#tb_Table).bootstrapTable(refresh); } }); //关闭弹窗 layer.closeAll(); }, function() { }); //删除(全) layer.confirm(是否删除节点【 authName 】, { icon: 0, closeBtn: 0,//屏蔽关闭按钮X btn: [确定, 取消], title: 提示 }, function(index) { //执行 $.ajax({ url: /security/deleteByChild, type: post, data: {id: id}, async: true,//true为异步false为同步 success: function(){ $(#nowid).val(无); $(#nowpid).val(无); $(#nowname).val(无); window.location.reload(); } }); //关闭弹窗 //layer.closeAll(); layer.close(index); }, function() { });指定弹出位置layer.confirm(审核通过确定吗, { //like12 add,20220517,解决弹窗位置超出页面,点击不到(看不到)的问题 offset: 300px,//距离顶部的位置 btn: [确定,取消] //按钮 },function(){ alert(您选择了确定); });参考layer.confirm回车事件触发确定_ai520587的博客-CSDN博客_layer.confirm回车方式四layer.load显示loading提示//显示loading提示 var loading layer.load(2,{shade: false});//0 1 2 shade:true阻止页面false不阻止 $(.J_mainContent iframe:visible).load(function () { //iframe加载完成后隐藏loading提示 layer.close(loading); });带最长等待时间//显示loading提示 //var loading layer.load(2);//0 1 2 //var loading layer.load(2,{shade: [0.1,#fff]});//0 1 2 0.1透明度的白色背景 var loading layer.load(2,{shade: false});//0 1 2 shade:false页面其他操作可以继续进行true阻止页面 //var loading layer.load(2,{shade: false, time: 10*1000});//0 1 2 shade:false页面其他操作可以继续进行true阻止页面 time最长等待时间 $(.J_mainContent iframe:visible).load(function () { //iframe加载完成后隐藏loading提示 layer.close(loading); });target.attr(src, url); /*//显示loading提示(bug,此处再开启会导致load内function每刷新一次就多执行一次 且累加) var loading layer.load(2,{shade: false});//0 1 2 shade:true阻止页面false不阻止 target.attr(src, url).load(function () { //关闭loading提示 layer.close(loading); });*/示例//显示loading提示 //var loading layer.load(2,{shade: false});//0 1 2 shade:true阻止页面false不阻止 var loading layer.load(2,{shade: false, time: 5*1000});//0 1 2 shade:false页面其他操作可以继续进行true阻止页面 time最长等待时间 $(.J_mainContent iframe:visible).load(function () { //iframe加载完成后隐藏loading提示 layer.close(loading); });参考layer.load的使用 - 段佳伟 - 博客园layer.js中load()方法的使用_g229191727的博客-CSDN博客_layer.load方式五layer.open打开子窗口(释放焦点,解决回车时无限弹出的问题)maxmin: true,//最大化按钮layer.open参数//新增 $(#btn_Add).bind(click,function(){ layer.open({ type: 2, skin: layui-layer-molv, title: 新增, shadeClose: true, shade: 0.4, maxmin: true, //area: [800px, 500px], area: [800px, 600px], //area: [900px, 600px], //area: [900px, 650px], content: /garageInfo/addGarageInfoHtml, end: function () { //子窗口向父窗体传参数(取消时不刷新) var returnVal $(#childReturnData).val(); if(returnVal save){ $(#tb_Table).bootstrapTable(refresh); } //复位 $(#childReturnData).val(); }, success: function () { //释放焦点,解决回车时无限弹出的问题 $(:focus).blur(); }, //解决最大化时高度不自动改变的问题 full: function(dom) { //通用100%(type1时取92%) $(dom).find(.layui-layer-content).css(height,100%); //解决下部缺失的问题(type2时有效) $(dom).find(iframe[name^layui-layer-iframe]).css(height,92%); } }); });使用layer时候 想在弹出层 在打开的时候默认就是最大值perContent layer.open({}); layer.full(perContent);layer.open({ // 基本层类型0信息框默认1页面层2iframe层也就是解析content3加载层4tips层 type: 1, title: 标题, // 当type: 2时就是url content: 内容/url, // 宽高如果是100%就是满屏 area: [733px, 450px], // 坐标auto默认坐标即垂直水平居中具体当文档https://www.layui.com/doc/modules/layer.html#offset offset: auto, // 按钮按钮1的回调是yes也可以是btn1而从按钮2开始则回调为btn2: function(){}以此类推 btn: [按钮1, 按钮2], // 关闭按钮layer提供了两种风格的关闭按钮可通过配置1和2来展示如果不显示则0 closeBtn: 1, // 遮罩默认0.3透明度的黑色背景#000 shade: 0.3, // 是否点击遮罩关闭默认false shadeClose: false, // 自动关闭所需毫秒默认0不会自动关闭 time: 0, // 最大最小化默认false maxmin: false, // 固定默认true fixed: true, // 是否允许拉伸默认true resize: true, // 层叠顺序默认19891014一般用于解决和其它组件的层叠冲突 zIndex: 19891014, // 层弹出后的成功回调方法layero前层DOMindex当前层索引 success: function(layero, index){ }, // 第一个按钮事件也可以叫btn1 yes: function (index, layero) { }, btn2: function (index, layero) { layer.close(index); }, // 右上角关闭按钮触发的回调默认会自动触发关闭。如果不想关闭return false即可 cancel: function(index, layero){ if(layer.confirm(确定要关闭么)){ //只有当点击confirm框的确定时该层才会关闭 layer.close(index); } return false; }, // 层销毁后触发的回调无论是确认还是取消只要层被销毁了end都会执行不携带任何参数。 end: function(){ }, // 最大化后触发的回调携带一个参数即当前层DOM full: function(layero){ }, // 最小化后触发的回调携带一个参数即当前层DOM min: function(layero){ }, // 还原后触发的回调携带一个参数即当前层DOM restore: function(layero){ }, });layer.open打开图片1打开照片(固定尺寸 倍数缩放)//打开照片(固定尺寸 倍数缩放) var path row.pic; if(!path){ layer.alert(无信息,{icon: 0}); return; } //支持按倍数放大 var widthInt 142; var heightInt 198; var img div styletext-align:center;margin-top:10px; img idpic width widthInt px height heightInt px src imgPreGlobal path / /div ; layer.open({ type: 1,//0信息框(默认) 1页面层 2iframe层 3加载层 4tips层 skin: layui-layer-molv, title: 照片, shadeClose: true, shade: 0.4, maxmin: true, area: [300px, 300px], content: img, //解决最大化时高度不自动改变的问题 full: function(dom) { //通用100%(type1时取92%) $(dom).find(.layui-layer-content).css(height,92%); //解决下部缺失的问题(type2时有效) $(dom).find(iframe[name^layui-layer-iframe]).css(height,92%); //修改图片显示尺寸 $(#pic).attr(width,widthInt * 3 px);//426px $(#pic).attr(height,heightInt * 3 px);//594px }, //还原 restore: function() { //修改图片显示尺寸 $(#pic).attr(width,widthInt px);//142px $(#pic).attr(height,heightInt px);//198px } });2单张图片(宽度100% 高度自适应)//单张图片(宽度100% 高度自适应) var path row.zzdjpzPic; if(!path){ layer.alert(无信息,{icon: 0}); return; } var img div styletext-align:center; img width100% src imgPreGlobal path / /div ; layer.open({ type: 1,//0信息框(默认) 1页面层 2iframe层 3加载层 4tips层 skin: layui-layer-molv, title: 居住证, shadeClose: true, shade: 0.4, maxmin: true, area: [700px, 500px], content: img, //解决最大化时高度不自动改变的问题 full: function(dom) { //通用100%(type1时取92%) $(dom).find(.layui-layer-content).css(height,92%); //解决下部缺失的问题(type2时有效) $(dom).find(iframe[name^layui-layer-iframe]).css(height,92%); } });3多张图片(宽度100% 高度自适应)//多张图片(宽度100% 高度自适应) var path row.cardFace; if(!path){ layer.alert(无信息,{icon: 0}); return; } //身份证背面(兼容传2张图片的情况) var path2 row.cardBack; var img2 ; if(path2){ img2 img width100% src imgPreGlobal path2 /; } var img div styletext-align:center; img width100% src imgPreGlobal path / img2 /div ; layer.open({ type: 1,//0信息框(默认) 1页面层 2iframe层 3加载层 4tips层 skin: layui-layer-molv, title: 身份证, shadeClose: true, shade: 0.4, maxmin: true, area: [900px, 650px], content: img, //解决最大化时高度不自动改变的问题 full: function(dom) { //通用100%(type1时取92%) $(dom).find(.layui-layer-content).css(height,92%); //解决下部缺失的问题(type2时有效) $(dom).find(iframe[name^layui-layer-iframe]).css(height,92%); } });IDEA-dialogerdialoger.$toast({mes: 用户名或密码错误});Loading Alert Confirm Toast Notify Modal//打开loading dialoger.$loading.open({mes: 请稍后}); //关闭loading dialoger.$loading.close(); //打开Alert框 dialoger.$alert({mes: 这是提示的信息}); //打开Alert框带标题点击确定按钮执行回调 dialoger.$alert({mes: 这是提示的信息, title: 标题, callback: function(){ console.log(你点击了确定); }}); //普通的确认框 dialoger.$confirm({ mes: 点击确定按钮试下?, callback: function() { dialoger.$toast({mes: 你点击了OK}) } }); //自定义按钮的带标题的 dialoger.$confirm({ title: 确认提示, mes: 确定要删除吗?, btns: [ {txt: 不删除, stylename: default-btn, callback: function(){ dialoger.$toast({mes: 不删除}) }}, {txt: 考虑一下, callback: function(){ dialoger.$toast({mes: 很谨慎}) }}, {txt: 删除吧, callback: function() { dialoger.$toast({mes: 已经删除}) }} ] }); //正确的提示 dialoger.$toast({mes: 成功, type: success}); //错误的提示 dialoger.$toast({mes: 错误, type: error}); //不带图标的提示,timeout默认2000 dialoger.$toast({mes: This is toast, timeout: 3000}); //顶部提示,timeout 默认3000 dialoger.$notify({mes: 这是提示的信息, timeout: 5000}); //简单的弹出层 dialoger.$modal.open({ id: modalid, body: pThis is modal!/p }); dialoger.$modal.open({ id: modalid, title: 来自于ModalBody里的内容, body: document.querySelector(#modalBody) });项目地址jsWeb弹出框(无依赖)包括Alert、Confirm、Toast、Loading、Notify、Modal - 开发小院Dorado7方式一dorado.MessageBox.alert(输入有误);方式二dorado.widget.NotifyTipManager.notify(不能删除含有子节点的菜单);注意不能传数字 需转换为字符串 否则无反应如dorado.widget.NotifyTipManager.notify(11 );方式三【Dorado7 字符串输入框prompt】// 输入框 dorado.MessageBox.prompt(请输入, { defaultText: 100, callback: function(text) { dorado.MessageBox.alert(text); } });方式四throw new dorado.Exception(请输入一个有效的昵称);方式五自定义对话框dorado.MessageBox.show({icon: WARNING,title: 自定义个的标题,message: 这是一个自定义的对话框,buttons: [yes, no, cancel],closeAction: cancel,detailCallback: function(button, text) {dorado.widget.NotifyTipManager.notify(您选择了\ button \。);}});六仅关注肯定操作//仅关注肯定操作 dorado.MessageBox.confirm(请作出您的选择..., function() { dorado.widget.NotifyTipManager.notify(您选择了\是\。); });七关注所有操作//关注所有操作 dorado.MessageBox.confirm(请作出您的选择..., { detailCallback: function(button, text) { dorado.widget.NotifyTipManager.notify(您选择了\ button \。); } });控件--基本控件--系统对话框Dorado Sample CenterVUE1、notifythis.$message.success(验证通过)this.$message.error(表单验证未通过请检查)2、alert// 退出登录 this.$alert(修改成功请重新登录, 提示, { type: success }).then(() { this.$emit(after) }).catch(() { })this.$alert(res.msg, 提示, { type: res.code 200 ? success : error })3、confirmthis.$confirm(是否删除该用户?, 提示, { confirmButtonText: 确定, cancelButtonText: 取消, type: error }).then(() { sysUserApi.deleteById(id).then(res { this.$message.success(res.msg) this.getByPage() }) })微信小程序wx.showModal(Object object) | 微信开放文档注意cancelText与confirmText文字长度有限制超出就会无反应wx.showModal({ content: 确认删除吗, success: (res) { if(res.confirm){ // 清空data中的historyList this.setData({ historyList: [] }) // 移除本地的历史记录缓存 wx.removeStorageSync(searchHistory) } } })// 是否在校学生 wx.showModal({ title: 提示, content: 是否在校学生, cancelText: 社会人士, confirmText: 在校学生, success: (res) { if (res.confirm) { wx.navigateTo({ url: /pages/xxx?ifStudent1 }) } else if(res.cancel) { wx.navigateTo({ url: /pages/xxx?ifStudent0 }) } } })