PopLayer弹出层 使用简单 代码简洁(for PC)
弹出层(PC端)
开发时间:2015-07-26 10:58:43
使用javasc面向对象开发,代替JS原本的alert,confirm等弹出事件,用户体验更好
参考手册
开始
文档
下载
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="description" content="">
	<title>弹出层组件</title>
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/PopLayer.css">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/PopLayer.js"></script>
</head>
<body>
	<div class="PopLayer-pageHtml" id="pageHtml">
		<p>这是页面的内容1</p>
		<p>这是页面的内容2</p>
	</div>
</body>
<script>
/*
//页面层
Layer.page({width:700,height:400,pageHtml:$('#pageHtml').html()});
//自定义Html层
Layer.customHtml({header:"自定义弹出层!",width:550,height:400,html:'<div>这是自定义弹出的层!</div>'});
//iframe层
Layer.iframe({width:700,height:500,href:"iframe.html"});
*/

//提醒对话框
//Layer.confirm({width:300,height:160,title:"你确认这样做吗?",header:"提醒对话框"},function(){alert("是的我确认这样做")});
//信息对话框
//Layer.alert({width:300,height:150,type:"msg",title:"这是很重要的提示信息额!",header:"信息对话框"});
//成功对话框
//Layer.alert({width:300,height:150,type:"success",title:"你已经成功点击了我!",header:""});
//失败对话框
//Layer.alert({width:300,height:150,type:"error",title:"加载失败了额!"});

//Layer.miss({width:250,height:90,title:"2秒后消失",time:2000});
//Layer.loading({width:300,height:110,srcType:3,title:"正在加载中,请稍后..."});
/*
//关闭加载层
setTimeout(function(){
	Layer.closeLoading();
},3000)
//关闭所有层
setTimeout(function(){
	//Layer.closeAllLayer()
},2000)*/
//关闭当前层
//Layer.closeNowLayer("alertMask");
/*
说明:alertMask为当前需要关闭层的class
页面层的Class为 pageMask                即:Layer.closeNowLayer('pageMask ');
自定义Html层的Class为 customHtmlMask    即:Layer.closeNowLayer('customHtmlMask');
iframe层的Class为 iframeMask            即:Layer.closeNowLayer('iframeMask');
提醒对话框的Class为 confirmMask         即:Layer.closeNowLayer('confirmMask');
Alert层的Class为 alertMask              即:Layer.closeNowLayer('alertMask');
*/
</script>	  
</html>


一:引入CSSnmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

1.PopLayer.css   //验证表单必须的样式  (必须)nmC 武汉seo web前端工程师 -微创意

2.font-awesome.min.css //小图标样式  (可选)nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

nmC 武汉seo web前端工程师 -微创意

二:引入JSnmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

  1. jquery.js     //必须  1.7版本以上 (必须)nmC 武汉seo web前端工程师 -微创意

  2. PopLayer.js  //组件核心js文件        (必须)nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

弹出层nmC 武汉seo web前端工程师 -微创意

nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

自定义Html层   iframe层   页面层nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

<a href="javascript:void(0)" onclick='Layer.customHtml({header:"自定义弹出层!",width:550,height:400,html:"<div>这是自定义弹出的层!</div>"})' class="popLayer-click">自定义Html层</a>
<a href="javascript:void(0)" onclick='Layer.iframe({width:700,height:500,href:"iframe.html"})' class="popLayer-click">iframe层</a>
<a href="javascript:void(0)" onclick='Layer.page({width:700,height:400,pageHtml:$("#pageHtml").html()})' class="popLayer-click">页面层</a>


nmC 武汉seo web前端工程师 -微创意

对话框nmC 武汉seo web前端工程师 -微创意

nmC 武汉seo web前端工程师 -微创意



nmC 武汉seo web前端工程师 -微创意

提醒对话框   信息对话框   成功对话框   失败对话框nmC 武汉seo web前端工程师 -微创意

nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

<a href="javascript:void(0)" onclick='Layer.confirm({width:300,height:160,title:"你确认这样做吗?",header:"提醒对话框"},function(){alert("是的我确认这样做")})' class="popLayer-click">提醒对话框</a>
<a href="javascript:void(0)" onclick='Layer.alert({width:300,height:150,type:"msg",title:"这是很重要的提示信息额!",header:"信息对话框"})' class="popLayer-click">信息对话框</a>
<a href="javascript:void(0)" onclick='Layer.alert({width:300,height:150,type:"success",title:"你已经成功点击了我!"})' class="popLayer-click">成功对话框</a>
<a href="javascript:void(0)" onclick='Layer.alert({width:300,height:150,type:"error",title:"加载失败了额!"})' class="popLayer-click">失败对话框</a>


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

Tips对话nmC 武汉seo web前端工程师 -微创意

nmC 武汉seo web前端工程师 -微创意



nmC 武汉seo web前端工程师 -微创意

2秒后消失   加载层nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

<a href="javascript:void(0)" onclick='Layer.miss({width:250,height:90,title:"2秒后消失",time:2000})' class="popLayer-click">2秒后消失</a>
<a href="javascript:void(0)" onclick='Layer.loading({width:300,height:110,srcType:3,title:"正在加载中,请稍后..."})' class="popLayer-click">加载层</a>


nmC 武汉seo web前端工程师 -微创意

关闭加载层nmC 武汉seo web前端工程师 -微创意

Layer.closeLoading();


nmC 武汉seo web前端工程师 -微创意

加载层的styleType说明nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

Layer.loading({width:300,height:110,srcType:3,title:"正在加载中,请稍后..."})

styleType有4个值分别为1,2,3,4   不同加载的图片不一样nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

关闭当前层nmC 武汉seo web前端工程师 -微创意

Layer.closeNowLayer("alertMask");


nmC 武汉seo web前端工程师 -微创意

说明:alertMask为当前需要关闭层的classnmC 武汉seo web前端工程师 -微创意

页面层的Class为 pageMask                           即:Layer.closeNowLayer('pageMask ');nmC 武汉seo web前端工程师 -微创意

自定义Html层的Class为 customHtmlMask    即:Layer.closeNowLayer('customHtmlMask');nmC 武汉seo web前端工程师 -微创意

iframe层的Class为 iframeMask                     即:Layer.closeNowLayer('iframeMask');nmC 武汉seo web前端工程师 -微创意

提醒对话框的Class为 confirmMask               即:Layer.closeNowLayer('confirmMask');nmC 武汉seo web前端工程师 -微创意

Alert层的Class为 alertMask                          即:Layer.closeNowLayer('alertMask');nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

关闭所有层nmC 武汉seo web前端工程师 -微创意

Layer.closeAllLayer();


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

参数说明nmC 武汉seo web前端工程师 -微创意

{
    width:300,                             //弹出层的宽度
    height:170,                            //弹出层的高度
    time:2000,                             //信息框的消失时间
    hrader:"信息",                     //弹出层的头部信息
    title:"你确认这样做吗?" ,       //弹出层时提示的内容
    href:"",                                  //ifname 的连接
    pageHtml:"",                      //页面弹出层的HTML内容
    srcType,                             //加载图标显示的类型
    closeMask:true                    //是否在点击遮罩时关闭弹出层
}


nmC 武汉seo web前端工程师 -微创意

JS / Html页面 直接调用方法nmC 武汉seo web前端工程师 -微创意

//页面层
Layer.page({width:700,height:400,pageHtml:$('#pageHtml').html()});
//自定义Html层
Layer.customHtml({header:"自定义弹出层!",width:550,height:400,html:'<div>这是自定义弹出的层!</div>'});
//iframe层
Layer.iframe({width:700,height:500,href:"iframe.html"});

//提醒对话框
Layer.confirm({width:300,height:160,title:"你确认这样做吗?",header:"提醒对话框"},function(){alert("是的我确认这样做")});
//信息对话框
Layer.alert({width:300,height:150,type:"msg",title:"这是很重要的提示信息额!",header:"信息对话框"});
//成功对话框
Layer.alert({width:300,height:150,type:"success",title:"你已经成功点击了我!"});
//失败对话框
Layer.alert({width:300,height:150,type:"error",title:"加载失败了额!"});

//2秒后消失
Layer.miss({width:250,height:90,title:"2秒后消失",time:2000});
//加载层
Layer.loading({width:300,height:110,srcType:3,title:"正在加载中,请稍后..."});

//关闭加载层
Layer.closeLoading();

//关闭所有层
Layer.closeAllLayer()

//关闭当前层
Layer.closeNowLayer("alertMask");  //关闭当前的alert层


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意


nmC 武汉seo web前端工程师 -微创意

这是页面的内容1 这是页面的内容2nmC 武汉seo web前端工程师 -微创意

nmC 武汉seo web前端工程师 -微创意

弹出层(PC端)版本:1.01
源码 demo演示