这是一款很简单的modal弹出层插件,js很简单,都封装在main.js,初学者也能看明白,还有注释哦。若是放在手机端浏览,效果更佳!~
modal菜单和关闭按钮
<div class="cd-bouncy-nav-modal">
<nav>
<ul class="cd-bouncy-nav">
<li><a href="http://www.sucaihuo.com">首页</a></li>
<li><a href="http://www.sucaihuo.com/js">jQuery</a></li>
<li><a href="http://www.sucaihuo.com/php">PHP</a></li>
<li><a href="http://www.sucaihuo.com/templates">模板</a></li>
<li><a href="http://www.sucaihuo.com/site">网址</a></li>
<li><a href="http://www.sucaihuo.com/tools">工具</a></li>
</ul>
</nav>
<a href="#0" class="cd-close">Close modal</a>
</div>
显示菜单html
<a class="cd-bouncy-nav-trigger" href="#0">显示菜单</a>
main.js
var is_bouncy_nav_animating = false;
//弹出菜单
$('.cd-bouncy-nav-trigger').on('click', function() {
triggerBouncyNav(true);
});
//关闭菜单
$('.cd-bouncy-nav-modal .cd-close').on('click', function() {
triggerBouncyNav(false);
});
$('.cd-bouncy-nav-modal').on('click', function(event) {
if ($(event.target).is('.cd-bouncy-nav-modal')) {
triggerBouncyNav(false);
}
});
function triggerBouncyNav($bool) {
//点击若没有动画
if (!is_bouncy_nav_animating) {
is_bouncy_nav_animating = true;
//切换菜单动画
$('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
$('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
if (!$bool)
$('.cd-bouncy-nav-modal').removeClass('fade-out');
is_bouncy_nav_animating = false;
});
//判断css 动画是否开启..
if ($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0) {
$('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
is_bouncy_nav_animating = false;
}
}
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791