jQuery特效：當模式框打開並關閉時

Question

我終於修復了我在AJAX和jQuery模態框中遇到的問題。

現在我只想添加典型效果......但我不知道代碼。

效果之一：模態對話框打開的時候，我想「背景」褪色

效果二：當你點擊X關閉對話框，我希望它慢慢淡出

看：

<script src="js/simplemodal.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#message-sent').hide(); 
     $('#contact-form').submit(function() { 
      $.ajax({ 
       type: "POST", 
       url: $(this).attr('action'), 
       data: $(this).serialize(), 
       success: function() { 
        $("#message-sent").modal({ 
         onOpen: function(dialog) { 
          dialog.overlay.fadeIn('slow', function() { 
           dialog.container.fadeIn('slow', function() { 
            dialog.data.fadeIn('slow'); 
           }); 
          }); 
         }, 
         onClose: function (dialog) { 
          dialog.data.fadeOut('slow', function() { 
           dialog.container.fadeOut('slow', function() { 
            dialog.overlay.fadeOut('slow', function() { 
             $.modal.close(); 
            }); 
           }); 
          }); 
         }, 
         closeClass: 'close-btn' 
        }); 
       } 
      }); 
      $('#contact-form')[0].reset(); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

什麼你看是使用內置SimpleModal的選項來達到你所需要的。

這部分代碼：

success: function() { 
    $("#message-sent").fadeIn().modal({ 
     closeClass: 'close-btn' 
    }); 
} 

應修改爲使用由SimpleModal提供的內置結構，啓動模式對話框。該dialog.overlay.fadeIn()是你在找什麼，在做背景褪色：

success: function() { 
    $("#message-sent").modal({ 
     onOpen: function(dialog) { 
      dialog.overlay.fadeIn('slow', function() { 
       dialog.container.fadeIn('slow', function() { 
        dialog.data.fadeIn('slow'); 
       }); 
      }); 
     } 
    }); 
} 

至於關閉模式對話框，你可以調用$.modal.close();關閉模式對話框，或指定一個simplemodal-close類到你希望的任何元素在點擊時允許模式框關閉。 SimpleModal會自動將關閉操作綁定到它們。

您也可以動畫添加到收盤時，使用以下：

onClose: function (dialog) { 
    dialog.data.fadeOut('slow', function() { 
     dialog.container.fadeOut('slow', function() { 
      dialog.overlay.fadeOut('slow', function() { 
       $.modal.close(); 
      }); 
     }); 
    }); 
}