不错的一款国产弹出js插件Layer

最新推荐文章于 2020-06-10 19:34:32 发布

luckytjx

最新推荐文章于 2020-06-10 19:34:32 发布

阅读量1k

点赞数

分类专栏： js 文章标签： layer

本文链接：https://blog.csdn.net/luckytjx/article/details/52134701

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这款layer弹出层插件还是相当不错的，尤其是相当小，只有20K，大大加快网页的打开速度。

用到的Jquery最好使用Jquery1.8版本以上，效果会好些。

一、常用的弹出页面。

1）普通弹出窗体

   
   
    
    
     
     layer.open({
    
    
    
    
     
       type: 1, //page层
    
    
    
    
     
       area: ['500px', '300px'],
    
    
    
    
     
       title: '你好，layer。',
    
    
    
    
     
       skin: 'layui-layer-molv',
    
    
    
    
     
       shade: 0.6, //遮罩透明度
    
    
    
    
     
       moveType: 1, //拖拽风格，0是默认，1是传统拖动
    
    
    
    
     
       shift: 1, //0-6的动画形式，-1不开启
    
    
    
    
     
       content: '<div style="padding:50px;"> //这是一个非常普通的页面层（type:1），传入了自定义的html</div>'
    
    
    
    
     
     });

2）带方法弹出

    
    
     
     
      
      

     
     
     
     
      
      var 
      
      pathUrl="http://www.baidu.com"
     
     
     
     
      
          layer.open({
     
     
     
     
      
      	 	type:2,    // type 0(信息框),1 页面层，2 iframe层，3加载层，4 tips层。
     
     
     
     
      
      	 	title:'新页面',  //标题
     
     
     
     
      
      	 	area: ['900px', '500px'],  //宽高
     
     
     
     
      
      	 	skin: 'layui-layer-lan' ,  //内置有3种，默认为浅白色，蓝色 layui-layer-lan 和绿色layui-layer-molv
     
     
     
     
      
      	 	closeBtn :2,  //关闭按钮样式 默认为1，（0不显示）
     
     
     
     
      
      		shadeClose:false,
     
     
     
     
      
      		shade: 0.3,
     
     
     
     
      
      	 	content:[pathUrl,'no'], //内容  当前为无滚动条
     
     
     
     
      
      	 	btn:['确定','关闭'],     //按钮
     
     
     
     
      
      	 	yes:function(index, layero){    //确定按钮回调方法
     
     
     
     
      
      	 		
     
     
     
     
      
      	 	},
     
     
     
     
      
      	 	btn2:function(index,layero){   //第二个按钮回调方法  关闭为cancle
     
     
     
     
      
      	 		 layer.close(index);
     
     
     
     
      
      	 	},
     
     
     
     
      
      	 	success:function(layero, index){  //成功回调函数
     
     
     
     
      
      	 		 $(".layui-layer-btn0").css({"background":"#04c",color:'#fff'});
     
     
     
     
      
      	 		 $(".layui-layer-btn1").css({"background":"#da4f49",color:'#fff'});
     
     
     
     
      
      	 	} 
     
     
     
     
      
      	 	 
     
     
     
     
      
      	 });

2、普通弹出框

   
   
    
    
     
      layer.alert('偶吧深蓝style', {
    
    
    
    
     
         skin: 'layui-layer-lan'
    
    
    
    
     
         ,closeBtn: 0
    
    
    
    
     
         ,shift: 7 //动画类型
    
    
    
    
     
       });

3、询问框

   
   
    
    
     
     //询问框
    
    
    
    
     
     layer.confirm('您是如何看待前端开发？', {
    
    
    
    
     
       skin: 'layui-layer-lan' ,  
    
    
    
    
     
       btn: ['重要','奇葩'] //按钮
    
    
    
    
     
      
    
    
    
    
     
     }, function(){
    
    
    
    
     
       layer.msg('的确很重要', {icon: 1});
    
    
    
    
     
     }, function(){
    
    
    
    
     
        
    
    
    
    
     
     });

4、提示层

   
   
    
    
     
     //提示层
    
    
    
    
     
     layer.msg('玩命提示中');

5、询问框

   
   
    
    
     
     layer.prompt({
    
    
    
    
     
       title: '输入任何口令，并确认',
    
    
    
    
     
       skin: 'layui-layer-lan' ,  
    
    
    
    
     
       formType: 1 //prompt风格，支持0-2
    
    
    
    
     
     }, function(pass){
    
    
    
    
     
       layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){
    
    
    
    
     
         layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);
    
    
    
    
     
       });
    
    
    
    
     
     });

6、小tip提示

   
   
    
    
     
     //小tips
    
    
    
    
     
     layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
    
    
    
    
     
       tips: [1, '#3595CC'],
    
    
    
    
     
       time: 4000
    
    
    
    
     
     });

二、扩展用法。

1、获取子页面的方法。

	btn1:function(index,layero){
		var win = frames["layui-layer-iframe"+index];	// window[layero.find('iframe')[0]['name']];
		var ret=win.test.test();
		}

2、修改button样式。

		var options={
				type:2,
				title: '测试',
				shade: 0.8,
				btn:["测试","关闭"],
				btn1:function(index,layero){
				
				},
				btn2:function(index,layero){
				
				},
				area:["900px","400px"],
				skin:'layui-layer-lan',
				content: 'http://www.baidu.com,
				success:function(layero, index){
					$('.layui-layer-btn0').css({"background" : "#2e8ded",color:'white'});
					$('.layui-layer-btn0').css({"background" : "#dd514c",color:'white'});
				}
			};
			layer.open(options);

更多特效使用详见http://layer.layui.com/