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

如何在js popup模式中轻松自如

1 个答案: