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

所属分类:UI-弹出层

 6775  48  查看评论 (6)
基于bootstrap和animate.css的模态框效果 ie兼容10

使用方法

第一步:引入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>


相关插件-弹出层

easyDialog 简单、实用的弹出层组件

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。
  弹出层
 17387  80

jQuery遮罩弹窗居中

jQuery遮罩弹窗始终屏幕剧中,调用简单代码少。
  弹出层
 17809  124

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 33242  102

jQuery悬浮窗弹出登录注册

jQuery悬浮窗弹出登录注册
  弹出层
 21237  128

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    heyShion 0
    2017/2/14 11:00:57
    PéiGǔangTíng 0
    2016/12/5 13:12:21
    不错 效果不错!!! 回复
    再笨也是我媳妇┽ 0
    2016/11/28 22:11:03
    很给力啊
        追逐明天0
        2016/11/28 23:11:07
        主要是animate.css比较给力
    回复
    亚伯拉罕 0
    2016/11/28 14:11:04
    移动端拖动的时候貌似会拖动下面的内容,而不是拖动模态框里面的内容,该怎么修改这个呢?
        追逐明天1
        2016/11/28 15:11:50

        这个是因为bootstrap默认的模态框窗口的样式

        .model{overflow:hidden}

        导致的,你在自己的样式中覆盖bootstrap默认样式就好如添加

        .bigModal{overflow:auto}

        它就可以滚动了

    回复
取消回复