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

Question

我创建了一个弹出窗口，并尝试使其逐渐淡入和淡出。 我尝试在其他人尝试应用淡入和淡出之后对代码进行建模，但是由于某种原因，我的代码没有受到影响。

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

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

在代码中，我看到它工作得很好。 现在，我添加了ID，但是什么也没有发生。

我创建了一个小提琴来展示我要做什么。

https://jsfiddle.net/51ysjz6y/

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

Answer 1

我通过以下更新了您的小提琴

将一些代码更改为jQuery，并从div中删除了onclick

更新的小提琴

    $(document).ready(function(){
        $(".signinbutton a").click(function() {
            $('#light').fadeIn('slow');
        });

        function fade(id) {
            $("#" + id).fadeOut('slow');
        }
    });

Answer 2

只需将一个class添加到<a>并删除所有不需要的click javascript函数，就可以按如下所示调用它并显示overlay ：

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

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

DEMO

---

UPDATE

<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结构

Answer 3

正如您编写的代码一样：

有您想要的一切。

只需更换

<a class="close" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

同

<a class="close" href="javascript:fade('light'); fade('fade');" >Close</a>

和

<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Sign In</a>

同

<a href="javascript:light('light'); light('fade');">Sign In</a>