<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>建百站-falvr</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/flavr.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/flavr.min.js"></script>
</head>
<body>
<div class="container">
<div class="content">
<div class="livedemo clearfix">
<!-------------------------------------------------------------------------------------------------------------
SIMPLE ALERT
--------------------------------------------------------------------------------------------------------------->
<div class="demo-block" id="demo-alert">
<div class="demo-title">Simple Alert</div>
<p class="demo-desc">
<b>flavr</b> is designed to be able to run with minimal cofiguration
</p>
<div class="demo-actions">
<a href="#" class="btn btn-default btn-code">Code</a>
<a href="#" class="btn btn-default btn-demo">Demo</a>
</div>
<div class="demo-code">
<pre><code class="javascript">new $.flavr('Hello World!');</code></pre>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------
CONFIRM DIALOG
--------------------------------------------------------------------------------------------------------------->
<div class="demo-block" id="demo-confirm">
<div class="demo-title">Confirm Dialog</div>
<p class="demo-desc">
A confirm dialog with two preset buttons
</p>
<div class="demo-actions">
<a href="#" class="btn btn-default btn-code">Code</a>
<a href="#" class="btn btn-default btn-demo">Demo</a>
</div>
<div class="demo-code">
<pre><code class="javascript">new $.flavr({
content : 'Are you sure to delete your memories?',
dialog : 'confirm',
onConfirm : function(){
alert('Deleted');
},
onCancel : function(){
alert('Canceled');
}
});
/*----- OR ----- */
new $.flavr().confirm('Are you sure to delete your memories?', function(){
alert('Deleted');
}, function(){
alert('Canceled');
});</code></pre>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------
PROMPT DIALOG
--------------------------------------------------------------------------------------------------------------->
<div class="demo-block" id="demo-prompt">
<div class="demo-title">Prompt Dialog</div>
<p class="demo-desc">
A better prompt dialog
</p>
<div class="demo-actions">
<a href="#" class="btn btn-default btn-code">Code</a>
<a href="#" class="btn btn-default btn-demo">Demo</a>
</div>
<div class="demo-code">
<pre><code class="javascript">new $.flavr({
content : 'How old are you?',
dialog : 'prompt',
prompt : { placeholder: 'Enter something' },
onConfirm : function( $container, $prompt ){
alert( $prompt.val() );
return false;
},
onCancel : function(){
alert('Canceled');
}
});
/*----- OR ----- */
new $.flavr().prompt('Enter something', 'How old are you?', function( $container, $prompt ){
alert( $prompt.val() );
return false;
}, function(){
alert('Canceled');
});</code></pre>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------
MULTIPLE DIALOGS
--------------------------------------------------------------------------------------------------------------->
<div class="demo-block" id="demo-multi-instance">
<div class="demo-title">Multiple Dialog Instance</div>
<p class="demo-desc">
<b>flavr</b> supports unlimited dialog instance/layer that will stack on the user screen
</p>
<div class="demo-actions">
<a href="#" class="btn btn-default btn-code">Code</a>
<a href="#" class="btn btn-default btn-demo">Demo</a>
</div>
<div class="demo-code">
<pre><code class="javascript">new $.flavr({
content : 'Nuff siad, here is the last one',
position : 'top-right'
}, function(){
new $.flavr({
content : 'The stack is unlimited, pretty cool huh',
position : 'top-left'
}, function(){
new $.flavr({
content : 'Here is the dialog #3',
position : 'bottom-right'
}, function(){
new $.flavr({
content : 'Me dialog #2',
position : 'bottom-mid'
}, function(){
new $.flavr({
content :'I am dialog #1',
buttons : {
exit : { text: 'Close All', style: 'danger',
action: function(){
this.exit();
}
},
close : {}
}
});
});
});
});
});</code></pre>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------
MULTIPLE BUTTONS
--------------------------------------------------------------------------------------------------------------->
<div class="demo-block" id="demo-multi-buttons">
<div class="demo-title">Multiple Buttons</div>
<p class="demo-desc">
You could add as many button as you wish to your dialog.
</p>
<div class="demo-actions">
<a href="#" class="btn btn-default btn-code">Code</a>
<a href="#" class="btn btn-default btn-demo">Demo</a>
</div>
<div class="demo-code">
<pre><code class="javascript">new $.flavr({
content : 'flavr box with multiple buttons',
buttons : {
primary : { text: 'Primary', style: 'primary',
action: function(){
alert('Primary button');
return false;
}
},
success : { text: 'Success', style: 'success',
action: function(){
alert('Mission succeed!');
return false;
flavr弹窗demo
4星 · 超过85%的资源 需积分: 15 106 浏览量
2018-09-11
23:58:08
上传
评论 1
收藏 67KB RAR 举报 
flavr超漂亮jquery弹出层对话框.rar （9个子文件） 
flavr超漂亮jquery弹出层对话框 css 
bootstrap.min.css 93KB flavr.css 11KB animate.css 57KB style.css 12KB images 
email.png 2KB
index.html 55KB js jquery.min.js 91KB flavr.min.js 8KB common.js 1KB资源评论
xinghx782022-07-14希望有更多的说明资料
zhengjinfeng
- 粉丝: 2
- 资源: 1
