评论：flavr―超级漂亮的jQuery扁平弹出对话框  [查看原文]

子鱼小窝0
2022/7/13 11:49:58
花了币，居然给的还是压缩版的，浪费感情💔

/**
 * 封装flavr，方便使用
 */
var Flavr = function() {
    //动画数组
    var animates = ["tada", "swing", "shake", "rubberBand", "bounce", "pulse"];
    //获取随机动画
    function getAnimate() {
        return animates[Math.floor(Math.random() * animates.length)];
    }

    var fr = {
        /**
         * 弹窗信息
         * @param {String} 信息内容 
         */
        alert: function(msg) {
            new $.flavr({
                buttons: {
                    OK: {
                        text: 'OK',
                        style: 'default',
                        addClass: null,
                        action: null
                    }
                },
                animateEntrance: getAnimate(),
                content: msg
            });
        },
        /**
         * 提示信息
         * @param {String} 信息内容
         */
        msg: function(msg) {
            new $.flavr({
                modal: false,
                autoclose: true,
                timeout: 2000,
                buttons: {},
                animateEntrance: getAnimate(),
                content: msg
            });
        },
        /**
         * 确认信息
         * @param {String} 信息内容
         * @param {Function} 确认回调函数
         * @param {Function} 取消回调函数
         */
        confirm: function(msg, okBack, cancelBack) {
            new $.flavr({
                dialog: 'confirm',
                buttons: {
                    OK: {
                        text: '确认',
                        style: 'danger',
                        addClass: null,
                        action: okBack
                    },
                    CANCEL: {
                        text: '取消',
                        addClass: null,
                        action: cancelBack
                    }
                },
                animateEntrance: getAnimate(),
                content: msg
            });
        }
    }
    return fr;
}
var flavr = new Flavr();

flavr.alert("Flavr Alert");
flavr.msg("Flavr Msg");
flavr.confirm("确定删除吗？", function() {
    flavr.msg("删除成功");
});

whjgz920
2019/1/7 15:29:26
应该没有的

把按钮内容变成中文实例，我是参考多个按钮demo改出来的

new $.flavr({
    content: 'How old are you?',
    dialog: 'prompt',
    prompt: {
        placeholder: 'Enter something'
    },
    buttons: {
        danger: {
            text: '确定',
            style: 'danger',
            action: function() {
                alert('Mission failed!');
                return false;
            }
        },
        cancel: {
            text: '取消',
            style: 'default'
        }
    },
});

戒??0
2018/1/29 16:12:57

buttons: {
    danger: {
        text: '确定',
        style: 'danger',
        action: function() {
            alert('Mission failed!');
            return false;
        }
    },
    cancel: {
        text: '取消',
        style: 'default'
    }
}

戒??0
2018/1/29 16:13:30

哈哈，我是参考多个按钮demo代码悟出来的

好看

不错 赞

谢谢楼主  

咚！！！0
2017/7/31 11:12:46

  弹出是这样的   

p0o9o9p00
2017/6/28 13:29:09

这个自己研究下啊，我是在flavr.min.js中改的，都有对应的按钮，可能有的按钮还有其他地方需要改，自己试着改改看