IDEA-layer

方式一：layer.alert()

layer.alert("当前行的下标:" + row.username, {icon: 0});

icon=0 1 2 3 4 5 6 7

01234567

方式二：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.msg

layer.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,//屏蔽关闭按钮Xbtn: ['确定', '取消'],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%(type=1时取92%)$(dom).find('.layui-layer-content').css('height','100%');//解决下部缺失的问题(type=2时有效)$(dom).find('iframe[name^="layui-layer-iframe"]').css('height','92%');}});
});

使用layer时候想在弹出层在打开的时候默认就是最大值

perContent = layer.open({});
layer.full(perContent);

layer.open({// 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）type: 1,title: "标题",// 当type: 2时就是urlcontent: "内容/url",// 宽高：如果是100%就是满屏area: ['733px', '450px'],// 坐标：auto（默认坐标，即垂直水平居中），具体当文档：https://www.layui.com/doc/modules/layer.html#offsetoffset: 'auto',// 按钮：按钮1的回调是yes（也可以是btn1），而从按钮2开始，则回调为btn2: function(){}，以此类推btn: ['按钮1', '按钮2'],// 关闭按钮：layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则0closeBtn: 1,// 遮罩：默认：0.3透明度的黑色背景（'#000'）shade: 0.3,// 是否点击遮罩关闭：默认：falseshadeClose: false,// 自动关闭所需毫秒：默认：0不会自动关闭time: 0,// 最大最小化：默认：falsemaxmin: false,// 固定：默认：truefixed: true,// 是否允许拉伸：默认：trueresize: true,// 层叠顺序：默认：19891014，一般用于解决和其它组件的层叠冲突zIndex: 19891014,// 层弹出后的成功回调方法：layero前层DOM，index当前层索引success: function(layero, index){},// 第一个按钮事件，也可以叫btn1yes: 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(){},// 最大化后触发的回调：携带一个参数，即当前层DOMfull: function(layero){},// 最小化后触发的回调：携带一个参数，即当前层DOMmin: function(layero){},// 还原后触发的回调：携带一个参数，即当前层DOMrestore: 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 style="text-align:center;margin-top:10px;">' +'<img id="pic" 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%(type=1时取92%)$(dom).find('.layui-layer-content').css('height','92%');//解决下部缺失的问题(type=2时有效)$(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 style="text-align:center;">' +'<img width="100%" 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%(type=1时取92%)$(dom).find('.layui-layer-content').css('height','92%');//解决下部缺失的问题(type=2时有效)$(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 width="100%" src=' + imgPreGlobal + path2 + ' />';
}
var img = '<div style="text-align:center;">' +'<img width="100%" 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%(type=1时取92%)$(dom).find('.layui-layer-content').css('height','92%');//解决下部缺失的问题(type=2时有效)$(dom).find('iframe[name^="layui-layer-iframe"]').css('height','92%');}
});

IDEA-dialoger

dialoger.$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: '<p>This 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 + "");

方式三：

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 Center

VUE

1、notify

this.$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、confirm

this.$confirm('是否删除该用户?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'error'
}).then(() => {sysUserApi.deleteById(id).then(res => {this.$message.success(res.msg)this.getByPage()})
})

Dorado7 notify非alert 输入框prompt confirm layer dialoger，layer.msg，toast效果，几秒关闭layer.load layer.open相关推荐

给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动...
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
js、jQuery、layer实现弹出层的打开、关闭
打开layer layer.open({type: 2,title: '新增收货地址',shadeClose: true,//点击阴影关闭shade: 0.8,area: ['900px', '60% ...
layer.open参数；layer.open关闭事件；layer.open关闭刷新；layer.open获取子页的值；layer.open调用子页面的方法
父页面 function layerOpen(){layer.open({type: 2,shade: [0],title: "验收申请",area: ['1024px', '68 ...
android 只输入数字与小数点_Android金额输入框只允许输入小数点后两位效果
一:要实现这个效果也不是很复杂,只需要设置输入框输入的字符类型.设置InputFilter.设置输入变化监听即可.下面直接来看代码吧-. 二:new 一个class extends AppCompat ...
关闭当前layer弹出层，点按钮再弹出一个layer弹出层
关闭当前layer弹出层,点按钮再弹出一个layer弹出层 yes - 确定按钮回调方法类型:Function,默认:null 该回调携带两个参数,分别为当前层索引.当前层DOM对象.如: laye ...
webdriver之select、alert、prompt、confirm
select_by_index() :通过索引定位 select_by_value() :通过value值定位 select_by_visible_text() :通过文本值定位 deselect ...
layer调用父页面方法_Ruby for SketchUp之图层【Layer】
我们学习了群组.组件及组件定义,今天来看看图层[Layer],在Sketchup2020版本中已经更名为"标记",如图那么图层在我们建模过程中能带来哪些便利呢? 可以快速的隐藏同 ...
android 悬浮窗输入框_利用DecorView实现悬浮窗的效果
由于众所周知的原因,Android系统虽然提供了悬浮窗的功能,但使用之前需要用记授权,有些手机对这个授权还要再次确认,以至于很多用户出于谨慎的目地就不去打开了.但我们在实际开发当中却又需要这个功能是该 ...
Vue（二十一）Layer弹出层
安装:下载源码到本地 layer: 丰富多样的 Web 弹出层组件,可轻松实现 Alert/Confirm/Prompt/普通提示/页面区块/iframe/tips 等等几乎所有的弹出交互.目前已成为 ...

Dorado7 notify非alert 输入框prompt confirm layer dialoger，layer.msg，toast效果，几秒关闭layer.load layer.open

项目地址：jsWeb弹出框(无依赖)，包括Alert、Confirm、Toast、Loading、Notify、Modal - 开发小院

Dorado7

Dorado7 notify非alert 输入框prompt confirm layer dialoger，layer.msg，toast效果，几秒关闭layer.load layer.open相关推荐

最新文章

热门文章