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에서 제공하는 기본 구조를 사용하도록 수정해야합니다. 모달 상자를 닫기 위해, 당신은 모달 상자를 닫습니다, 또는 당신이 원하는 모든 요소에 simplemodal-close 클래스를 지정하는 $.modal.close();를 호출 할 수 있습니다으로

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

다음 dialog.overlay.fadeIn() 당신이 배경 페이드를 만들기 위해보고있는 것입니다 버튼을 클릭하면 모달 상자가 닫힙니다. SimpleModal은 자동으로 닫기 동작을 바인딩합니다.

또한 다음 사용하여 주변에 애니메이션을 추가 할 수 있습니다

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