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

Updated fiddle

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

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

Answer 2

只需将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结构

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>

淡入/淡出无法弹出

3 个答案: