手机网站发号系统源码,全网推广系统,珠海蓝迪装饰公司官网,参与网站建设的人员最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果#xff0c;故记录一下。原文地址点这里 此动画效果需要引入animate.css#xff0c;可以在animate.css官方网址中点击下载animate.css. 这篇文章和这篇有对animate的简介。 将如下代码放入JS文件全局引入… 最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果故记录一下。原文地址点这里 此动画效果需要引入animate.css可以在animate.css官方网址中点击下载animate.css. 这篇文章和这篇有对animate的简介。 将如下代码放入JS文件全局引入
//animate.css动画触动一次方法
$.fn.extend({animateCss: function (animationName) {var animationEnd webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend;this.addClass(animated animationName).one(animationEnd, function() {$(this).removeClass(animated animationName);});}});
/*** 显示模态框方法* param targetModel 模态框选择器jquery选择器* param animateName 弹出动作* callback 回调方法*/
var modalShow function(targetModel, animateName, callback){var animationIn [bounceIn,bounceInDown,bounceInLeft,bounceInRight,bounceInUp,fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeOutUp,fadeInDownBig, fadeInLeftBig, fadeOutRightBig, fadeOutUpBig,flipInX,flipInY,lightSpeedIn,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,zoomIn,zoomInDown,zoomInLeft,zoomInRight,zoomInUp,slideInDown,slideInLeft,slideInRight, slideInUp,rollIn];if(!animateName || animationIn.indexOf(animateName)-1){console.log(animationIn.length);var intRandom Math.floor(Math.random()*animationIn.length);animateName animationIn[intRandom];}console.log(targetModel animateName);$(targetModel).show().animateCss(animateName);//callback.apply(this);
}
/*** 隐藏模态框方法* param targetModel 模态框选择器jquery选择器* param animateName 隐藏动作* callback 回调方法*/
var modalHide function(targetModel, animateName, callback){var animationOut [bounceOut,bounceOutDown,bounceOutLeft,bounceOutRight,bounceOutUp,fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp,fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, fadeOutUpBig,flipOutX,flipOutY,lightSpeedOut,rotateOut,rotateOutDownLeft,rotateOutDownRight,rotateOutUpLeft,rotateOutUpRight,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,slideOutDown,slideOutLeft,slideOutRight, slideOutUp,rollOut];if(!animateName || animationOut.indexOf(animateName)-1){console.log(animationOut.length);var intRandom Math.floor(Math.random()*animationOut.length);animateName animationOut[intRandom];}$(targetModel).children().click(function (e) {e.stopPropagation()});$(targetModel).animateCss(animateName);$(targetModel).delay(900).hide(1,function(){$(this).removeClass(animated animateName);});//callback.apply(this);
}
var modalDataInit function(info){//alert(info);//填充数据对弹出模态框数据样式初始化或修改
}
以下是HTML代码
button typebutton classbtn btn-primary test-btn onclickmodalShow(#bigModal, , modalDataInit(test));模态框测试
/button
div classmodal bs-example-modal-lg onclickmodalHide(#bigModal, );
idbigModaldiv classmodal-dialog modal-lgdiv classmodal-contentdiv classmodal-headerbutton typebutton onclickmodalHide(#bigModal, ); classclosedata-dismissmodalspan aria-hiddentrue×/spanspan classsr-onlyClose/span/buttonh4 classmodal-title模态框标题/h4/divdiv classmodal-body/div/div/div
/div
在刚开始或刷新页面时点击对话框会自动隐藏添加以下代码可以解决问题
$(function(){$(#bigModal).children().click(function(e){e.stopPropagation()});
}); 每次打开和关闭模态框时会随机选择一个动画效果也可以自己代码里写死效果棒
