最近在網上看到了可以對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 type="button" class="btn btn-primary test-btn" onclick="modalShow('#bigModal', '', modalDataInit('test'));">模態框測試 </button> <div class="modal bs-example-modal-lg" onclick="modalHide('#bigModal', '');" id="bigModal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" onclick="modalHide('#bigModal', '');" class="close"data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button><h4 class="modal-title">模態框標題</h4></div><div class="modal-body"></div></div></div> </div>

在剛開始或刷新頁面時，點擊對話框會自動隱藏，添加以下代碼可以解決問題：

$(function(){$('#bigModal').children().click(function(e){e.stopPropagation()}); });

?每次打開和關閉模態框時會隨機選擇一個動畫效果，也可以自己代碼里寫死效果，棒！

總結

以上是生活随笔為你收集整理的基于Bootstrap和animate.css的模态框动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。