0

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

我需要的是当我单击 .box 并在叠加层中有 .box 内容时创建一个叠加层。

我不确定我是否做得对，因为我是 jQuery 的新手。我创建了一个类 .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

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

1 回答 1

0

既然你有这个代码

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

只要有点击事件，它就会删除overlay类，因为根据您的问题，您只需要在单击时将其删除.box，您不需要此代码，或者如果您在单击任何特定元素时将其删除，请提供适当的选择器对于 id、class 等元素

编辑根据评论：

当前，您正在加载元素时添加覆盖类，这导致了问题。

将您的 html 更改为

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

你的 javascript

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

演示

于 2012-05-16T02:27:48.817 回答