Jquery 单击包含DIV1内容的DIV1后创建覆盖

基本上，我有一页内容都放在.box中

我需要的是在单击.box并在覆盖中包含.box内容时创建一个覆盖

我不确定我是否做对了，因为我对jQuery非常陌生。我创建了一个class.overlay，并在单击时将该类添加到.box，但它根本不起作用。这是我的代码，所以我希望有人能指引我正确的方向

.overlay {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}

(function () {

$(document).ready(function(){
       $(".box").click(function(){
           $(".overlay").removeClass("overlay");
           $(this).addClass("overlay");
   });   

       $(document).click(function(){
           $(".overlay").removeClass("overlay");
       });
   });
}(jQuery));

html

内容>

因为您有此代码

$(document).click(function(){
           $(".overlay").removeClass("overlay");
       });

每当出现点击事件时，它将删除

覆盖

类，因为根据您的问题，您只需要点击

.box

，您不需要此代码，或者如果您在点击任何特定元素时删除此代码，请为该元素提供适当的选择器，如id，class e.t.c

根据评论编辑：

当前，在加载元素时添加覆盖类，这会导致问题

将html更改为

<div class="box">
   <p>content></p>
</div>

---

我已删除了这些行，并尝试在单击时将class.overlay添加到.box中，但仍然不起作用。有没有语法错误，或者可能是我做错了？没有语法错误，你能不能显示一些你的html，点击这里看看它确实删除并添加了类添加了html，现在我得到的是加载页面后的覆盖。我希望覆盖图被隐藏，并且仅在我单击.box时显示。。我想我是在错误的方向尝试它，它仍然没有添加覆盖到我的.box类。我忘了提一件事。我的.box类添加了.w和.h。我定义了不同的预设宽度和高度值，这会影响jQuery的执行吗？我在fiddle上添加了宽度和高度CSS，效果很好，所以我不确定到底是哪里出了问题。有没有其他方法可以创建这样的覆盖？这意味着什么？“当我单击.box并在覆盖中包含.box内容时，创建一个覆盖。”您是否尝试执行类似于模式覆盖的操作？类似于lightbox2。。但我只需要一个简单的覆盖。

<div class="box">
   <p>content></p>
</div>

$(".box").click(function() {
    $(".overlay").removeClass("overlay");
    $(this).addClass("overlay");
});