Javascript 如何更改代码以使用表而不是正文？

我是jquery的新手，我之前尝试过研究，但没有发现任何有用的东西。我想做的是将代码从处理整个身体改为处理一个特定的表，我不知道我会怎么做。代码的作用是：当你点击屏幕时，弹出窗口打开，如果你再次点击任何地方，弹出窗口关闭。我试着简单地将单词“body”改为“table”，当我点击桌子时，它打开了，但没有关闭

以下是jquery：

$(document).ready(function(){
     $("body").click(function(){
          $(".overlay, .popup").fadeToggle(); 
}); 
});
</script>

$(document).ready(function(){
     $("table").click(function(){
          $(".overlay, .popup").fadeToggle(); 
}); 
});
</script>

$（文档）.ready（函数（）{
$（“正文”）。单击（函数（）{
$（“.overlay.popup”）.fadeToggle（）；
}); 
});

以下是CSS：

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>

html，
身体{
身高：100%；
}
.覆盖{
位置：绝对位置；
显示：无；
/*具有alpha透明度的颜色*/
背景色：rgba（0,0,0,0.7）；
/*拉伸到屏幕边缘*/
排名：0；
左：0；
底部：0；
右：0；
}
.弹出窗口{
位置：绝对位置；
宽度：300px；
高度：150像素；
显示：无；
背景色：白色；
文本对齐：居中；
/*居中*/
最高：50%；
左：50%；
左边距：-150px；
利润上限：-75px；
}

以下是HTML：

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

<table width="50" height="50" bgcolor="red">
<tr>
<td>
click on me
</td>
</tr>
</table>

一些弹出文本
某些内容文本（单击任意位置以切换覆盖）

Jsfiddle：

以下是我尝试的代码：

以下是jquery：

$(document).ready(function(){
     $("body").click(function(){
          $(".overlay, .popup").fadeToggle(); 
}); 
});
</script>

$(document).ready(function(){
     $("table").click(function(){
          $(".overlay, .popup").fadeToggle(); 
}); 
});
</script>

$（文档）.ready（函数（）{
$（“表”）。单击（函数（）{
$（“.overlay.popup”）.fadeToggle（）；
}); 
});

以下是CSS：

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>

html，
身体{
身高：100%；
}
.覆盖{
位置：绝对位置；
显示：无；
/*具有alpha透明度的颜色*/
背景色：rgba（0,0,0,0.7）；
/*拉伸到屏幕边缘*/
排名：0；
左：0；
底部：0；
右：0；
}
.弹出窗口{
位置：绝对位置；
宽度：300px；
高度：150像素；
显示：无；
背景色：白色；
文本对齐：居中；
/*居中*/
最高：50%；
左：50%；
左边距：-150px；
利润上限：-75px；
}

以下是HTML：

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

<table width="50" height="50" bgcolor="red">
<tr>
<td>
click on me
</td>
</tr>
</table>

一些弹出文本
某些内容文本（单击任意位置以切换覆盖）

点击我

以下是JSFIDLE：

---

提前感谢您的帮助。

希望这是有意义的。所发生的是覆盖将覆盖一切，但覆盖仍然在身体内，所以它与身体正在设置工作

相反，只是让它这样。覆盖也被切换

---

您需要在

fadeIn（）

和

fadeOut（）

之间分割函数，因为每个函数的触发器都不同。尝试在覆盖层上设置淡出（），如下所示：

   $("table").on('click', function () {
        $(".overlay, .popup").fadeIn();
        $(".overlay").on('click', function () {
            $(".overlay, .popup").fadeOut();
            $(this).off();
        });
    });

以下是一个例子：

---

另外，使用

.on（'click'，…）

比使用

.click（…）

更可取，因为我可以使用

.off（）

轻松删除事件侦听器，并防止在不必要时侦听它。

我想这就是您要寻找的：

弹出窗口仅在表上显示单击，在单击任何位置时隐藏

$(document).ready(function(){
     $("table").click(function(){

          $(".overlay, .popup").fadeToggle(); 
         return false;
     }); 
    $("body").click(function () {
        if($(".popup:visible").length > 0)
        {
            $(".overlay, .popup").fadeToggle(); 
        }

    });
});

---

当您将jQuery单击更改为table时，覆盖层将不起作用的原因是覆盖层覆盖了表；因此，使其无法单击。您可以将

绑定
一个
单击
事件到覆盖以使覆盖淡出。查看此小提琴：
我在代码中看不到
表格
。如果使用
“表格”
作为选择器，则需要再次单击表格以关闭弹出窗口。这实际上可能不是一个选项，因为它看起来像
.overlay
元素遮住了页面的其余部分。最好有两个事件处理程序：一个用于表格显示覆盖，另一个用于全身关闭。我将在问题中添加我尝试过的内容。小提琴按预期工作，对吗？@AnthonyGrist你知道有什么方法可以绕过它吗？非常感谢，这太完美了！