jsポップアップモーダルで楽にする方法

Question

jsを使用してポップアップモーダルで簡単にしようとしましたが、私は下のコードを持っていますが、どこでトランジションスタイルを追加するのかはわかりません。それの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