jQuery删除类无法正常工作

Question

我正在尝试为点击某个ID时使用信息弹出式窗口的网站创建灯箱效果。该网站非常大，所以我在下面添加的代码已被修剪过多的东西。我点击.overlay时删除.hidden，我试图让#box1显示出来。我的jQuery代码有问题，但我不确定是什么，因为我很糟糕。

JSFIDDLE

HTML

<div id="nav"></div>
<div id="content">
    <div id="box1">Click Me</div>
</div>
<div id="footer">
    <div id="overlay" class="hidden"></div>
</div>

CSS

#nav{height:200px;background:#CCC;}
#content{height:200px;background:blue;}
#footer{height:200px;background:red;}
#box1{height:50px; width:50px; background:#0F0;position:absolute; left:300px;top:400px;}
#overlay{position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:visible;background:#90F;}
.hidden{display:none;}

JQUERY

$(document).ready(function(e) {
    $("#box1").click(function(e) {
        $("#overlay").removeClass("hidden");
    });
});

Answer 1

当你包含jQuery时jsfiddle工作，所以我认为问题依赖于包含jQuery。