基于bootstrap和animate.css的模态框效果

 查看演示  website  立即下载

使用方法

第一步：引入css文件，此处为引入网站资源，自己可以下载到本地调用

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

第二步：引入js

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

第三步：自定义方法，可添加到自定义全局js文件中

<script>
        //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);
            //填充数据，对弹出模态框数据样式初始化或修改
        }
</script>

以下是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>

PREVIOUS:
NEXT:
jquery加CSS3炫酷切割轮播图
jQuery自定义消息提示插件Jquery Toast Plugin