2016-10-19 3 views
0

versuchen zu erleichtern in einem Popup-modal mit js zu erleichtern, ich meinen Code unten, aber nicht sicher, wo den Übergang Stil hinzuzufügen, ich in der CSS hat gesucht und es gibt kein Glück so im seiner Annahme zu mach mit den js davon.wie in js Popup-modal

Mein Code ist unten.

// 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"; 
    } 
} 

Antwort

1

Verwendung jQuery:

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

3000 steht für die Menge an miliseconds Sie den Übergang zu wollen. Überprüfen Sie diesen Link für weitere Informationen über Ein- und Ausblenden: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

+0

Wo würde ich das hinstellen? Ich bin neu in Jquery Sorry, Alter. –

+0

@OwenDawson in der Click-Event-Funktion. Zum Schließen: fadeOut und zum Öffnen von fadeIn habe ich meine Antwort bearbeitet um ein Beispiel zu zeigen – G43beli