插件描述：基于bootstrap和animate.css的模态框效果，可以自定义显示隐藏的动态效果，可添加显示和隐藏时的回调方法，填充数据
使用方法
第一步：引入css文件，此处为引入网站资源，自己可以下载到本地调用
<!-- 新 Bootstrap 核心 CSS 文件 -->
1 |
第二步：引入js
第三步：自定义方法，可添加到自定义全局js文件中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <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> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery自定义消息提示插件Jquery Toast Plugin
- 下一个特效： jquery加CSS3炫酷切割轮播图