移动端和PC端页面常用的弹出层 一、移动端 二、PC端
我们在页面的时候，很多时候用到了弹出层，消息提醒，确认框等等，统一样式的弹出框可以使页面更加优美。在此，我整理一下我们项目的移动端和PC端页面常用的弹出层。
我们需在页面引入弹出框的样式和js
<link href="__STATIC__/weui.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="__JS__/m/dialog.js"></script>
1、提示语
1）加载
说明：带有等待图标，提示语内容为“数据加载中” 例子：$.Dialog.loading();
2）成功
说明：带有“√”图标，用于成功提示，默认提示为“操作成功!”，也可自定义
例子：$.Dialog.success("评论成功");
3） 失败
说明：带有“×”图标，用于失败提示，默认提示为“操作失败!”，也可自定义
例子：$.Dialog.fail("请选择活动");
2、确认框
说明：
第一个参数：题目 第二个参数：内容 回调方法：点击确认的回调函数
例子：
$.Dialog.alert('中奖啦', '活动已结束! ',function(){
window.location.href=index_url;
});
3、询问框
说明：第一个参数：题目 第二个参数：内容 第三个参数：左边按钮名 第四个参数：右边按钮名
rightCallback方法：点击右边按钮的回调函数
leftCallback方法：点击左边按钮的回调函数
例子：
$.Dialog.confirm("温馨提示","成功兑换优惠券","继续兑换","查看列表",{
rightCallback:function(){
location.href = "{:addons_url('ShopCoupon://Wap/personal')}";
},leftCallback:function(){
window.location.replace("{:U('score_exchange',array('coupon_type'=>0))}");
}
})
4、关闭提示框
说明：将以上的弹出框关闭。（成功提示与失败提示会在2000毫秒后自动关闭提示框） 例子：$.Dialog.close();
二、PC端
在页面中，我们需引入js:
<script type="text/javascript" src="__STATIC__/layertool/layer.js?v={:SITE_VERSION}"></script>
这里你可以参考layer的官方文档。http://layer.layui.com/
1、加载层
说明：有三种风格，load默认是不会自动关闭的
默认：
1：
2：
例子：
//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //换风格，并且设定最长等待10秒
2、提示框
说明：弹出提示层，常用的有以下两种
例子：
1） layer.msg()
layer.msg('玩命提示中');
2）layer.alert()
//eg1
layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){
//do something
layer.close(index);
});
3、询问层
说明：layer.confirm()，有两个按钮的弹出层
按钮名：btn: ['确认','取消']
标题名：title : ['提示' , true]
例子：
var pot = layer.confirm('请认真检查，提交后将不能修改，是否提交？', {
btn: ['确认','取消'], //按钮
title : ['提示' , true]
}, function(){
layer.close(pot);
var lay1 = layer.load();
$.post("{:U('save_reply')}",{reply:window.JSON.stringify(reply)},function(res){
if(res.status == 1){
layer.close(lay1);
layer.msg(res.msg);
setTimeout(window.location.replace("{$go_url}"),1000);
}else{
layer.close(lay1);
layer.msg(res.msg);
}
});
}, function(){
layer.close(pot);
});
4、页面层
说明：
title：题目
area：宽高
content：内容
例子：
//页面层
layer.open({
type: 1,
title:'客服回复',
skin: 'layui-layer-rim', //加上边框
area: ['450px', '290px'], //宽高
content:' <div class="table-bar" style="height: auto; padding-bottom: 10px;">'+
'客服名称： <input class="input_width" type="text" name="remark_name" /><br/>'+
'回复内容： <textarea class="input_width" name="remark" ></textarea><br/>' +
'<button class="btn layer_btn" >回复</button>' +
'</div>'
});
欢迎关注下面的公众号，进一步技术交流：