flavr—超级漂亮的jQuery扁平弹出对话框Css3弹出窗口837

最近更新于 3年前

flavr是一个时尚的扁平弹出对话框为您的下一个网站。
flavr是响应设计布局,能够适应任何屏幕大小。
得到最好的用户体验,使用流行的animate.css动画,最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
  清洁和现代平面设计
  充分响应
  轻量级的、功能强大的
  基于Bootstrap 开发
  CSS3动画在现代浏览器
  jQuery提供动力
  跨浏览器支持
调用示例 确认对话框
new $.flavr({
    content     : 'Press a button',
    dialog      : 'confirm',
    onConfirm   : function( $container ){
        alert('You pressed Confirm!');
        return false;
    },
    onCancel    : function( $container ){
        alert('You pressed Cancel');
    }
});
提示对话框
new $.flavr({
    content     : 'Please enter your name',
    dialog      : 'prompt',
    prompt      : { value: 'Harry Potter', addClass: 'prompt-name' },
    onConfirm   : function( $container, $prompt ){
        alert('Howdy ' + $prompt.val() + ' !');
        return false;
    }
});
表单对话框
var html =  
'   <div class="form-row">' +
'       <input type="text" name="username" ' +
'       placeholder="Username" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="password" name="password" ' +
'       placeholder="Password" />' +
'   </div>' +
'   <div class="form-row">' +
'       <input type="checkbox" name="remember" ' +
'       id="check"/>' +
'       <label for="check">Remember me</label>' +
'   </div>';

new $.flavr({
    title       : 'Form',
    content     : 'Please login to continue',
    dialog      : 'form',
    form        : { content: html, addClass: 'form-html' },
    onSubmit    : function( $container, $form ){
        alert( $form.serialize() );        
        return false;
    }
});
自定义图标
new $.flavr({
    content     : 'You\'ve got 1 message',
    iconPath    : 'flavr/images/icons/',
    icon        : 'star.png',
    buttons     : {
        read    : { style: 'info' },
        later   : { style: 'danger' }
    }
});
模态和覆盖
new $.flavr({
    content     : 'I am modeless dialog',
    modal       : false
});
对话框位置
new $.flavr({
    content     : 'Me at top left',
    position    : 'top-left'    
});

new $.flavr({
    content     : 'Me at top right',
    position    : 'top-right'    
});

new $.flavr({
    content     : 'Me at bottom mid',
    position    : 'bottom-mid'    
});
回调
new $.flavr({
    content     : 'Callback example',
    buttons     : {
        hide    : { style: 'danger', action: function(){ this.hide(); return false }},
        close   : { style: 'info' }
    },
    onLoad      : function(){
        alert('The plugin has been loaded');
    },
    onBuild     : function(){
        alert('The DOM elements have been created');
    },
    onShow      : function(){
        alert('The dialog is displayed on screen');
    },
    onHide      : function(){
        var flavr = this;
        alert('Displaying the dialog again after 3 seconds');
        setInterval(function(){
            flavr.show();
        }, 3000);
    },
    onClose     : function(){        
        if(! confirm('Close now?')) return false;
    }
});

技术讨论区(23 个讨论)

  1. Tomorrow 23

    Tomorrow

    ddddddddddddddd

    2016-12-14 12:11:27 | 回复

  2. __小_灰_灰_ 22

    __小_灰_灰_

    确实不错,感觉比sweetalert更简洁。

    2016-7-26 16:47:25 | 回复

  3. 45°微笑 21

    45°微笑

    好东西 谢谢大神们

    2016-3-29 15:00:12 | 回复

  4. 丶__⊙ 20

    丶__⊙

    不错不错!!!

    2016-2-22 14:10:30 | 回复

  5. 流浪野人 19

    流浪野人

    这个不错哎!搞下来试试

    2015-7-31 11:20:16 | 回复

  6. 谁的生命在抽动 18

    2015-7-30 16:18:38 | 回复

  7. 单纯的欲望 17

    单纯的欲望

    不错,能兼容ie8

    2015-6-27 18:39:27 | 回复

  8. 尼尔 盖曼 16

    尼尔 盖曼

    怎么付款。。支付宝里 选 担保 还是 直接支付。。

    2015-6-18 11:57:32 | 回复

  9. barcelona 15

    barcelona

    这个不错,我喜欢。

    2015-6-15 10:34:17 | 回复

  10. 剧终 14

    剧终

    这个不错,我喜欢,多谢分享

    2015-6-2 9:38:01 | 回复

  11. 更多讨论
  12. 请先登录

      发 布