javascript - 淡入/淡出不适用于弹出窗口

Question

我创建了一个弹出窗口，并试图让它慢慢淡入淡出。我尝试在其他人尝试应用淡入和淡出后对我的代码进行建模，但由于某种原因我的代码没有生效。

当我第一次从我看到的模型弹出窗口中添加代码时，它在 onclick 代码中有淡入淡出选项，如下所示...

onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

在代码中我看到它运行良好。现在我正在添加 ID，但没有任何反应。

我创建了一个 fiddle 来展示我正在尝试做的事情......

https://jsfiddle.net/51ysjz6y/

有人看到我做错了什么吗？

Answer 1

只需添加一个class至 <a>并删除所有不需要的点击 javascript功能，你可以用 overlay 如下调用它正在显示:

$('.signin').on('click',function(){
    $("#light,.black_overlay").fadeIn("slow");
});

$('.close').on('click',function(){
    $("#light,.black_overlay").fadeOut("slow");
})

DEMO

---

更新

<div class="signinbutton"> 
     <a class="signin" href="javascript:void(0)">Sign In</a>
</div>
<div id="light" class="signInpopup">
    <a class="close" href="javascript:void(0)">Close</a>
    <!--Forms and other elements-->
</div>

这是你的 html现在结构