layer演示5种通用的手机弹出层

来源:https://www.sucaihuo.com/js/736.html 2016-02-04 19:27浏览(9807) 收藏

之前我们分享了pc版的layer弹出层http://www.sucaihuo.com/js/716.html,今天再分享下手机版的,同样很酷炫。
layer演示5种通用的手机弹出层
分类:悬浮层/弹出层 > 弹窗 难易:入门级
查看演示 下载资源 下载积分: 20 积分

演示一:提示框

<a href="javascript:;" class="btn" onclick="showTip()">提示框</a>
function showTip() { //提示框
    layer.open({
        content: '您好',
        time: 2 //2秒后自动关闭
    });
}

演示二:信息框

<a href="javascript:;" class="btn" onclick="showInfo()">信息框</a>
function showInfo() { //信息框
    layer.open({
        title: '信息',
        content: '移动版和PC版不能同时使用在同一页面。'
    });
}

演示三:询问框

<a href="javascript:;" class="btn" onclick="showConfirm()">询问框</a>
function showConfirm() { //询问框
    layer.open({
        title: '提示',
        content: '您确定要刷新一下本页面吗?',
        btn: ['嗯', '不要'],
        yes: function(index) {
            location.reload();
            layer.close(index);
        }
    });
}

演示四:页面层

<a href="javascript:;" class="btn" onclick="showBox()">页面层</a>
function showBox() { //页面层
    layer.open({
        type: 1,
        content: '可传入任何内容,支持html。一般用于手机页面中',
        anim: 0,
        style: 'position:fixed; bottom:0; left:0; width:100%; height:150px; padding:10px 0; border:none;'
    });
}

演示五:加载条

<a href="javascript:;" class="btn" onclick="showLoading()">加载条</a>

function showLoading() { //加载层 layer.open({type: 2}); }

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2