Javascript 如何使用JQuery打开弹出式html选项卡窗口？

我正在处理一个

HTML

表格。我希望，如果单击“单击此处显示弹出窗口”，应打开一个带有关闭图标/文本的完整页面弹出窗口，以便用户可以关闭弹出窗口。我尝试了上面的代码，但不幸的是，它不起作用。我也添加了jquery，但这也不起作用

我还添加了以下代码，因此当单击“打开”和“关闭”HTML按钮时，jQuery需要添加或删除“活动”类

$(".open").on("click", function(){
$(".popup, .popup-content").addClass("active");
});

.english{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
.trenglectureenglishtd th{文本对齐：居中！重要；}
.Englisteenglishtr td、.Trenglecturenglishtd th{
边框：1px实心#424040；
文本对齐：左对齐；
填充：8px；
}
.英语{
计数器复位：行数；
/*宽度：30%*/
保证金：自动；
}
英语讲师英语{
计数器增量：行数；
}
第一个孩子：以前{
内容：计数器（行号）；
最小宽度：1米；
右边距：0.5em；
}
th.粘性头{
位置：粘性；
顶部：-1px；
z指数：10；
背景色：#8dbbea；
}
.hover_bkgr_fricc{
背景：rgba（0,0,0,4）；
光标：指针；
显示：无；
身高：100%；
位置：固定；
文本对齐：居中；
排名：0；
宽度：100%；
z指数：10000；
}
.hover\u bkgr\u fricc.helper{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.悬停\u bkgr\u fricc>div{
背景色：#fff；
盒影：10px 10px 60px#555；
显示：内联块；
高度：自动；
最大宽度：551px；
最小高度：100px；
垂直对齐：中间对齐；
宽度：60%；
位置：相对位置；
边界半径：8px；
填充：15px 5%；
}
.弹出关闭按钮{
背景色：#fff；
边框：3px实心#999；
边界半径：50px；
光标：指针；
显示：内联块；
字体系列：arial；
字体大小：粗体；
位置：绝对位置；
顶部：-20px；
右：-20px；
字体大小：25px；
线高：30px；
宽度：30px；
高度：30px；
文本对齐：居中；
}
.PopupClose按钮：悬停{
背景色：#ccc；
}
.trigger\u popup\u fricc{
光标：指针；
字体大小：20px；
利润率：20px；
显示：内联块；
字体大小：粗体；
}

锡
1111
2222
3333
4444
5555
aaaa
bbbb
中交
dddd
单击此处显示弹出窗口
锡
1111
2222
3333
4444
5555
aaaa
bbbb
中交
dddd
eeee

您只需使用

CSS

创建一个自定义的

弹出窗口

，添加一些

颜色

，使其

位置：

固定

高度为

100%

我还添加了一个关闭

X

按钮，该按钮将从

弹出窗口中删除活动的类

当您
单击
上的
时，单击此处显示弹出窗口
我们将向弹出窗口添加类
活动

现场演示：
//打开弹出窗口
$（.wordssynonyms”）。在（“单击”，函数（）上{
$（'.center'）.addClass（'active'）；
});
//关闭弹出窗口
$（“#关闭”）。在（“单击”，函数（）{
$（'.center'）.removeClass（'active'）；
});
.english{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
Trenglecturenglishtth{
文本对齐：居中！重要；
}
.ENGINEGLISHTR td，
Trenglecturenglishtth{
边框：1px实心#424040；
文本对齐：左对齐；
填充：8px；
}
.英语{
计数器复位：行数；
/*宽度：30%*/
保证金：自动；
}
英语讲师英语{
计数器增量：行数；
}
第一个孩子：以前{
内容：计数器（行号）；
最小宽度：1米；
右边距：0.5em；
}
th.粘性头{
位置：粘性；
顶部：-1px；
z指数：10；
背景色：#8dbbea；
}
.hover_bkgr_fricc{
背景：rgba（0,0,0,4）；
光标：指针；
显示：无；
身高：100%；
位置：固定；
文本对齐：居中；
排名：0；
宽度：100%；
z指数：10000；
}
.hover\u bkgr\u fricc.helper{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.悬停\u bkgr\u fricc>div{
背景色：#fff；
盒影：10px 10px 60px#555；
显示：内联块；
高度：自动；
最大宽度：551px；
最小高度：100px；
垂直对齐：中间对齐；
宽度：60%；
位置：相对位置；
边界半径：8px；
填充：15px 5%；
}
.弹出关闭按钮{
背景色：#fff；
边框：3px实心#999；
边界半径：50px；
光标：指针；
显示：内联块；
字体系列：arial；
字体大小：粗体；
位置：绝对位置；
顶部：-20px；
右：-20px；
字体大小：25px；
线高：30px；
宽度：30px；
高度：30px；
文本对齐：居中；
}
.PopupClose按钮：悬停{
背景色：#ccc；
}
.trigger\u popup\u fricc{
光标：指针；
字体大小：20px；
利润率：20px；
显示：内联块；
字体大小：粗体；
}
.中心{
保证金：自动；
宽度：70%；
填充：1em；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
位置：固定；
左：15%；
排名：0；
z指数：9999；
背景色：白色；
身高：100%；
}
#接近{
浮动：对；
}
hideform先生{
显示：无；
}
.主动{
显示：块；
}
.wordssynonyms{
光标：指针
}

锡
1111
2222
3333
4444
5555
aaaa
bbbb
中交
dddd
单击此处显示弹出窗口
锡
1111