《Layer弹窗加强版》

2019独角兽企业重金招聘Python工程师标准>>>

//无限弹窗
var offset = [10, 10], layerLoop = function(){
	//获取随机宽高，仅为了区分层
	var area = [(100+Math.random()*800)+'px', (100+Math.random()*400)+'px'];
	
	//坐标叠加，仅为了区分层
	offset[0] += 15;
	offset[1] += 15;

	var index = $.layer({
		type:1,
		fix: false,
		area: area,
		moveOut: true,
		zIndex: layer.zIndex,
		shade: [0],
		title: '贤心出品',
		offset: [offset[0]+'px', offset[1]+'px'],
		//以下对html做转义是为了防止被代码演示解析，实际应用时无需转义
		page: {html: '<\a href="javascript:;" id="next" class="next">点击继续弹出窗口\<\/a>'}, 
		success: function(othis){
			var next = othis.find('#next'), tit = othis.find('.xubox_title');
			next.on('click', function(event){
				layerLoop();
			});
			
			//开启点击使当前窗口置顶功能
			layer.setTop(othis);
		}
	});
};
$('#test5').on('click', layerLoop);

//关闭所有层运行此方法即可
layer.closeAll = function(){
	var layerObj = $('.xubox_layer');
	$.each(layerObj, function(){
		var i = $(this).attr('times');
		layer.close(i);
	});
};			
//tab选项卡
var tabi;
$('#test4').on('click', function(){
	tabi = $.layer({
		type:1,
		border: [0],
		area: ['602px', 'auto'],
		title: false,
		shade : [0.7 , '#000' , true],
		move: ['.tabmove', true],
		closeBtn: false,
		page: {dom: '.tab'}
	});	
});

//切换事件
var btn = $('.tabtit').children(), main = $('.tab_main').children(), close = $('.tabclose');
btn.on('click', function(){
	var othis = $(this), index = othis.index();
	othis.addClass('tabnow').siblings().removeClass('tabnow');
	main.eq(index).show().siblings().hide();
});
//关闭层
close.on('click', function(){
	layer.close(tabi);
});	

//页面向导
$('#test1').on('click', function(){
	var pagei = $.layer({
		type:1,
		border: [0], //不显示边框
		area: ['800px', 'auto'],
		title: false,
		shade: [0.7,'#000',true],
		offset: ['10px', '50%'],
		bgcolor: '',
		closeBtn: false,
		page:{html: '<\div class="diybox"><\span title="关闭" id="pageclose">\<\/span>\<\/div>'},  //此处对html做转义是为了防止被代码演示解析，实际应用时无需转义
		success: function(){
			var page = $('#pageclose');
			page.on('click', function(){
				layer.close(pagei);
			});
		}
	});
});			
//拖动模块
$('#test3').on('click', function(){
	$.layer({
		type:1,
		border: [0],
		area: ['120px', '100px'],
		title: false,
		shade: [0],
		move: ['.pagekuai', true],
        moveType: 1,
		closeBtn: false,
		page: {dom: '.pagekuai'}
	});
});

转载于:https://my.oschina.net/u/1269023/blog/201680