单页全屏弹窗效果animatedModal.js – CSS3 全屏模态窗口

页面过渡

animatedModal.js效果也基于animate.css完成

HTML：

 <div id="modal-02">

   <div class="close-modal-02">  //关闭的class注意 close-modal-02
    CLOSE MODAL
   </div>
   <div class="modal-content">

   </div>

 </div>

简单介绍基本参数：

$("#demo02").animatedModal({    // 默认点击#demo02触发
   modalTarget:'modal-02',      // 弹窗的ID名
   animatedIn:'lightSpeedIn',   //弹出淡入效果
   animatedOut:'bounceOutDown', //关闭时的淡出效果
   color:'red',                 //背景颜色
   animationDuration:'2s',     //过渡时间
   overflow:'scroll',         //是否要滚动条
 // Callbacks
 beforeOpen: function() {     //弹出前的回调
   console.log("The animation was called");
 }, 
 afterOpen: function() {    //弹出后
   console.log("The animation is completed");
 }, 
 beforeClose: function() {  //关闭前
   console.log("The animation was called");
 }, 
 afterClose: function() {    //关闭后
   console.log("The animation is completed");
 }
 });

默认参数：

官网：http://joaopereirawd.github.io/animatedModal.js/

http://pan.baidu.com/s/112awm

类似效果：http://www.jq22.com/plugin/830