对话框/Tips
过渡动画效果Bootstrap窗口弹窗
PetitQ
这是一款基于 velocity.js 过渡动画效果的 Bootstrap 模态窗口和 Popover。该效果在 Bootstrap 模态窗口和 Popover 的基础上，使用 velocity.js 来制作模态窗口和 Popover 打开时的动画过渡效果。
HTML 结构：
模态窗口和 Popover 的基本 HTML 结构如下。
也想出现在这里？联系我们吧
<!-- 模态窗口 -->
<a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">fadeIn</a>
<div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal header 1</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- popover -->
<a data-original-title="Popover on top" data-animation="false" data-easein="fadeIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">fadeIn</a>
JavaScript 代码：
该特效使用下面的 javascript 代码来为 Bootstrap 模态窗口和 Popover 打开时添加 velocity.js 的过渡动画效果。
// add the animation to the popover$('a[rel=popover]').popover().click(function(e) {
e.preventDefault();
var open = $(this).attr('data-easein');
if (open == 'shake') {
$(this).next().velocity('callout.' + open);
} else if (open == 'pulse') {
$(this).next().velocity('callout.' + open);
} else if (open == 'tada') {
$(this).next().velocity('callout.' + open);
} else if (open == 'flash') {
$(this).next().velocity('callout.' + open);
} else if (open == 'bounce') {
$(this).next().velocity('callout.' + open);
} else if (open == 'swing') {
$(this).next().velocity('callout.' + open);
} else {
$(this).next().velocity('transition.' + open);
}});
// add the animation to the modal$(".modal").each(function(index) {
$(this).on('show.bs.modal', function(e) {
var open = $(this).attr('data-easein');
if (open == 'shake') {
$('.modal-dialog').velocity('callout.' + open);
} else if (open == 'pulse') {
$('.modal-dialog').velocity('callout.' + open);
} else if (open == 'tada') {
$('.modal-dialog').velocity('callout.' + open);
} else if (open == 'flash') {
$('.modal-dialog').velocity('callout.' + open);
} else if (open == 'bounce') {
$('.modal-dialog').velocity('callout.' + open);
} else if (open == 'swing') {
$('.modal-dialog').velocity('callout.' + open);
} else {
$('.modal-dialog').velocity('transition.' + open);
}});
});
| 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
