
最近更新于 4年前
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; } });
技术讨论区(24 个讨论)
seaboy
东西是好,免费就更好了
2021-4-7 9:05:33 | 回复
Tomorrow
ddddddddddddddd
2016-12-14 12:11:27 | 回复
__小_灰_灰_
确实不错,感觉比sweetalert更简洁。
2016-7-26 16:47:25 | 回复
45°微笑
好东西 谢谢大神们
2016-3-29 15:00:12 | 回复
丶__⊙
不错不错!!!
2016-2-22 14:10:30 | 回复
流浪野人
这个不错哎!搞下来试试
2015-7-31 11:20:16 | 回复
谁的生命在抽动
Zebra_Dialog
2015-7-30 16:18:38 | 回复
单纯的欲望
不错,能兼容ie8
2015-6-27 18:39:27 | 回复
尼尔 盖曼
怎么付款。。支付宝里 选 担保 还是 直接支付。。
2015-6-18 11:57:32 | 回复
barcelona
这个不错,我喜欢。
2015-6-15 10:34:17 | 回复
发 布