flavr—超級漂亮的jQuery扁平彈出對話框Css3彈出窗口

flavr—超級漂亮的jQuery扁平彈出對話框Css3彈出窗口837
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;    }});

也許你還喜歡

乱码理论卡一卡二新区网站_日本性感美女极致诱惑_亲爱的老师3高清中文播放_韩国美女主播在线观看