jQuery手机端弹出框插件popups.js

所属分类:UI-弹出层

 55904  342  查看评论 (11)
分享到微信朋友圈
X
jQuery手机端弹出框插件popups.js ie兼容10
/*toast*/
$('#demo1').click(function() {
    jqtoast('你点击了toast')
})
/*alert*/
$('#demo2').click(function() {
    jqalert({
        title: '提示',
        content: '自定义弹窗内容,居左对齐显示,告知需要确认的信息等'
    })
})
/*confirm*/
$('#demo3').click(function() {
    jqalert({
        title: '提示',
        content: '自定义弹窗内容,居左对齐显示,告知需要确认的信息等',
        yestext: '知道了',
        notext: '取消'
    })
})
/*prompt*/
$('#demo4').click(function() {
    jqalert({
        title: '提示',
        prompt: '请问你叫什么名字?',
        yestext: '提交',
        notext: '取消',
        yesfn: function() {
            jqtoast('提交成功');
        },
        nofn: function() {
            jqtoast('你点击了取消');
        }
    })
})
/*点击按钮跳转*/
$('#demo5').click(function() {
    jqalert({
        title: '提示',
        content: '自定义弹窗内容,居左对齐显示,告知需要确认的信息等',
        yeslink: 'https://www.baidu.com/'
    })
})
/*取消默认点击背景消失*/
$('#demo6').click(function() {
    jqalert({
        title: '提示',
        content: '自定义弹窗内容,居左对齐显示,告知需要确认的信息等',
        click_bg: false
    })
})
相关插件-弹出层

jQuery弹出层插件(原创)

简约的jQuery弹出层插件
  弹出层
 26991  244

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 99793  451

18种弹框特效

18种弹框特效
  弹出层
 89431  892

jQuery图像展示插件Strip

Strip是Lightbox的一种,它只能部分覆盖页面。这样就不会占用大的屏幕面积,适用于比较小的移动设备
  弹出层
 32776  392

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    用户5566251159 0
    2020/1/8 15:24:13
    安卓 用到项目里 输入字的话 弹框被拉长了怎么办 回复
    天之蓝 1
    2019/5/16 20:36:32

    如果输入框需要增加非空判断,可将 popups.js 的 prompt 部分改成如下代码:

    if (prompt) {
        $(document).delegate('#yes_btn', 'click', function() {
            let value = $('.prompt-text').val();
            if (value == '') {
                jqtoast('内容不能为空');
                return;
            }
            setTimeout(function() {
                al.remove();
            }, 300);
            if (yesfn) {
                param.yesfn();
                yesfn = '';
            }
            param = {};
        });
    } else {
        $(document).delegate('#yes_btn', 'click', function() {
            setTimeout(function() {
                al.remove();
            }, 300);
            if (yesfn) {
                param.yesfn();
                yesfn = '';
            }
            param = {};
        });
    }
    回复
    L 0
    2019/2/23 16:59:42
    IOS上弹框出不来怎么破 回复
    korb 0
    2018/12/31 10:26:42
    prompt 输入的内容 怎么 接收? ?? 一脸懵
        你的智商难道拿去买萌了嘛0
        2019/1/8 18:18:51
        知道怎么解决了吗大佬,我也碰到过这个问题了
        ?向风Lin?0
        2019/3/20 19:57:22
        怎么获取值?
        你之跫音,乃心之回响1
        2019/4/15 14:50:55
        获取值的方法:
        var value = $('.prompt-text').val();
    回复
    chenrry 0
    2018/7/13 9:16:32

    confirm弹窗,点击取消,确认事件就不能再点了

        杨xx0
        2018/7/18 16:18:42
        测试!
        share1301
        2018/10/18 15:27:14

        找到了解决方法了, popup.js 脚本中的,cancel标签 位置的param = {}; 去掉就解决啦

        al.on('click', '[data-role="cancel"]', function() {
            al.remove();
            if (nofn) {
                param.nofn();
                nofn = '';
            }
            //param = {};
        });
        学海无涯0
        2019/6/25 9:30:20

        把这里的定时器去掉就行了,63行附近

        $(document).delegate('#yes_btn', 'click', function() {
            //setTimeout(function () {
            al.remove();
            //},300);
            if (yesfn) {
                param.yesfn();
                yesfn = '';
            }
            param = {};
        });
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复