jQuery 클래스가 작동하지 않습니다.

Question

특정 ID을 클릭하면 정보 팝업을 사용하는 사이트에 라이트 박스 효과를 만들려고합니다. 사이트가 너무 커서 아래에 추가 한 코드가 초과 된 부분을 잘라 냈습니다. #box1을 클릭하면 .overlay이 표시되면서 .hidden을 제거하여 표시하려고합니다. 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

jsfiddle은 jQuery를 포함 할 때 작동하므로 jQuery를 포함하는 문제에 의존한다고 가정합니다.