js 팝업 모드에서 완화하는 방법

Question

js를 사용하여 팝업 모달을 쉽게하기 위해 아래 코드를 가지고 있지만 전환 스타일을 추가 할 위치가 확실하지 않은 경우 CSS를 살펴본 결과 아무런 운이 없다고 가정합니다. 그것의 js로해라.

내 코드는 다음과 같습니다.

// Get the modal 
var modal = document.getElementById('loginModal'); 

// Get the button that opens the modal 
var btn = document.getElementById("login"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
    modal.style.fadeIn(3000); 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none".fadeIn(3000); 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 

Answer 1

사용 jQuery를이 :

window.onclick = function(event) { 
if (event.target == modal) { 
    $("#loginModal").fadeOut(3000) 
} 
} 

3000

당신이 전환되고 싶은 밀리 초의 양을 의미합니다. 페이드 인 및 페이드 아웃에 대한 추가 정보는 다음 링크를 확인하십시오. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein