看過bootstrap的模態框之后覺
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>測試頁面</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <style> .test-btn{ margin:50px 100px; } </style> <!-- 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> <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.call(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.call(this); } var modalDataInit = function(info){ alert(info); //填充數據，對彈出模態框數據樣式初始化或修改 } </script> </head> <body> <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"> <pre class="text-left"> modalShow('#bigModal', '', modalDataInit('test')); animateName可為空，或填寫對應的animateIn或者animateOut數組中的對應參數 顯示參數 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"]; 隱藏參數 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"]; </pre> </div> </div> </div> </div> </body> </html>
得很好用，但是個人覺得不太符合個人使用習慣，就加以修改