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

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

之前我们分享了pc版的layer弹出层http://www.sucaihuo.com/js/716.html,今天再分享下手机版的,同样很酷炫。
layer演示5种通用的手机弹出层
分类:悬浮层/弹出层 > 弹窗 难易:入门级
登录后点击“下载资源”按钮,复制链接,邀请好友免费下载
查看演示 下载资源: 434

手机扫码访问:

下载资源 下载积分: 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}); }

评论13
头像

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

  • 头像 12楼
    09-27 14:55
    b***6
    还好,弹框,还有加载,学习
  • 头像 11楼
    09-21 13:06
    2***1

    厉害了,可以使用,以后经常用的到
  • 头像 10楼
    04-18 10:31
    7***2
    不知道怎么关闭窗口
  • 头像 9楼
    04-06 09:02
    7***2
    这些比较值得学习
  • 头像 8楼
    01-14 09:30
    m***i
    厉害了,可以使用,以后经常用的到
  • 头像 7楼
    01-12 13:02
    a***n
    超喜欢那个加载条啊
  • 头像 6楼
    11-21 10:11
    z***1
    这个官网上也有 但是在这看到 也很高兴 支持你们
  • 头像 5楼
    10-14 15:20
    e***5
    以后能用到冷汗
  • 头像 4楼
    06-25 09:08
    1***8
    这个保存着,以后用
  • 头像 3楼
    06-19 09:18
    1***8
    以后能用到,不着急
1 2