一、layer的icon样式

以上样式测试代码：

 

[javascript] view plain copy

 
 
 
  1. layer.confirm(\’icon测试\’, {icon: 1, title:\’提示\’}, function(index){  
  2.   //do something  
  3.   alert(“确认”);  
  4.   layer.close(index);  
  5. });  

 

 

二、询问框

官方案例：

 

[javascript] view plain copy

 
 
 
  1. //询问框  
  2. layer.confirm(\’您是如何看待前端开发？\’, {  
  3.   btn: [\’重要\’,\’奇葩\’] //按钮  
  4. }, function(){  
  5.   layer.msg(\’的确很重要\’, {icon: 1});  
  6. }, function(){  
  7.   layer.msg(\’也可以这样\’, {  
  8.     time: 20000, //20s后自动关闭  
  9.     btn: [\’明白了\’, \’知道了\’]  
  10.   });  
  11. });  

本人所用到，需要修改标题，正如以上测试样式时的代码一样，实现自定义标题：

[javascript] view plain copy

 
 
 
  1. var message = “确定继续？”;  
  2.        //询问框  
  3.        layer.confirm(message, {icon: 3, title:\’信息提示\’}, function(index){  
  4.            //submitForm();  
  5.            layer.close(index);  
  6.        });  

 

 

三、提示层

 

官方案例：

 

[javascript] view plain copy

 
 
 
  1. //提示层  
  2. layer.msg(\’玩命提示中\’);  

 

默认关闭时间是3秒，效果如下（背景是官网的广告，实际效果是黑色半透明）：

自定义样式以及时间，代码如下：

 

[javascript] view plain copy

 
 
 
  1. layer.msg(\’操作成功!\’, {icon: 6, time: 2000});  

icon样式是6，关闭时间为2秒。效果如下：

 

四、弹框（自定义页）

官方案例：

 

[javascript] view plain copy

 
 
 
  1. //自定页  
  2. layer.open({  
  3.   type: 1,  
  4.   skin: \’layui-layer-demo\’, //样式类名  
  5.   closeBtn: 0, //不显示关闭按钮  
  6.   anim: 2,  
  7.   shadeClose: true, //开启遮罩关闭  
  8.   content: \’内容\’  
  9. });  

效果如下：

 

本人使用案例，使用layer实现弹框登录：

 

[javascript] view plain copy

 
 
 
  1. layer.open({    
  2.            type: 2,    
  3.            title: \’用户登录\’,    
  4.            maxmin: true,    
  5.            skin: \’layui-layer-lan\’,    
  6.            shadeClose: true, //点击遮罩关闭层    
  7.            area : [\’400px\’ , \’280px\’],    
  8.            content:\’login.html\’//弹框显示的url,对应的页面  
  9.        });    

其中‘login.html’是登录页面,其效果如下：

 

弹框登录案例，请参考本人另外一篇博客：使用layer实现登录弹框，登录成功以后关闭弹框并调用父窗口方法

版权声明：本文为hss-blog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hss-blog/articles/9441519.html