Layer如何让按钮的回调执行完毕后弹框不自动关闭？

最新推荐文章于 2022-05-17 17:05:13 发布

一只哆啦A梦

最新推荐文章于 2022-05-17 17:05:13 发布

阅读量1.2w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：插件文章标签： Layer

本文链接：https://blog.youkuaiyun.com/qq_31254047/article/details/80007713

插件专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用layer.js库改进弹窗交互的方法。通过调整按钮事件处理方式，实现了当手机号验证未通过时，阻止弹窗关闭的功能。此改动提高了用户体验，并确保了验证流程的有效执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题出现：

我点击“确定”时会验证“新手机号码”，如果验证不通过则不给该弹框关掉，但是实际操作时，不管验证怎么样，点击“确定”之后该弹框都会关掉。

之前的写法：

layer.open({
	  type: 1,
	  shade: false,
	  area: ['400px', '300px'],
	  title: '修改 - 手机号码', //不显示标题
	  content: $('.edit_phone1'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
	  cancel: function(){
	    layer.close();
	  },
	  btn: ['确定','取消'],//按钮
	  btn1: function(index, layero){
		  i++;
		  $(phoneValidate());  
		  if(phoneValidate().form()){
			  layer.closeAll(); 
			  $('#old_phone1').val($('#new_phone').val());
			 edit();
		  }
	  }
	});

后边查阅资料，发现把 btn1 改成 yes ,就可以了。验证不通过不关闭该弹框。

layer.open({
	  type: 1,
	  shade: false,
	  area: ['400px', '300px'],
	  title: '修改 - 手机号码', //不显示标题
	  content: $('.edit_phone1'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
	  cancel: function(){
	    layer.close();
	  },
	  btn: ['确定','取消'],//按钮
	  yes: function(index, layero){
		  i++;
		  $(phoneValidate());  
		  if(phoneValidate().form()){
			  layer.closeAll(); 
			  $('#old_phone1').val($('#new_phone').val());
			 edit();
		  }
	  }
	});