Javascript Jquery仅在单击后打开一次，如何修复此问题？

我希望为我的每个部分触发不同的按钮/模态。 我想点击点击，一个模态弹出显示所有的文章细节

到目前为止，一切正常，但我的问题是，我的模式只打开一次以供单击。 我想知道我必须在Javascript代码中修改什么，以使我的模式工作始终在单击时系统地打开

有什么想法吗？ 这是我的小提琴：

此处是代码片段：

const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {

  btn.onclick = function() {
     overlay = this.nextElementSibling
       overlay.classList.add('overlay--open');
  }
})


function closeModal() {
    overlay.classList.remove('overlay--open');
}

function onDocumentKeyUp(e) {
    if (e.keyCode === 27) {
        closeModal();
    }
}

function onDocumentClick(e) {
    if (e.target === overlay) {
        closeModal();

    }
}

document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);

在所有关闭按钮中将onclick=document.getElementById'YourModalBox.style.display='none'替换为closeModal

const modalBtns=document.queryselectoral'.modal btn'； 让覆盖； modalBtns.forEachbtn=>{ btn.onclick=函数{ overlay=this.nextElementSibling 添加'overlay-open'； document.body.classList.add'hidden'； } } 函数闭合模式{ 类列表。删除“overlay-open”； document.body.classList.remove'hidden'； } 函数onDocumentKeyUpe{ 如果e.keyCode===27{ 封闭模式； } } 函数onDocumentClicke{ 如果e.target==覆盖{ 封闭模式； } } document.addEventListener'click'，onDocumentClick，false； 文件。添加了文件列表“keyup”，onDocumentKeyUp，错误； 隐藏的{ 溢出：隐藏； } .关闭按钮{ 边界：无； 显示：内联块； 填充：8px 16px； 垂直对齐：中间对齐； 溢出：隐藏； 文字装饰：无； 颜色：继承； 背景色：红色； 文本对齐：居中； 光标：指针； 空白：nowrap } 托普赖特先生{ 位置：固定！重要； 右：20px； 顶部：20px； } *{z-指数：999999； 保证金：0； 填充：0； } 正文，html{ 字体大小：16px； } /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ .img容器{ 显示器：flex； 高度：100vh； 证明内容：中心； 对齐项目：居中； 填充：20px； 背景色：白色； 证明内容：中心； z指数：0； } @仅介质屏幕，最大宽度：800px{ .img集装箱{ 填充：20px； 高度：80vh； } } @仅介质屏幕，最大宽度：450px{ .img集装箱{ 填充：20px； 高度：82vh； } } uno{背景：紫色；} 到期{背景：黄色；} tre{背景：黑色；} img{ 位置：绝对位置； 边界半径：20px； 身高：100%； z指数：0； } @仅介质屏幕，最大宽度：800px{ img{ 宽度：95%； 身高：80%； 对象匹配：覆盖； } } @仅介质屏幕，最大宽度：450px{ img{ 宽度：95%； 身高：100%； 对象匹配：覆盖； } } .粘的{ 职位：-网络工具包粘性； 位置：粘性； 底部：20px； 右：20px； 证明内容：之间的空间； 自对准：柔性端； 左边距：自动； } .粘性按钮{ 背景：无； -webkit字体平滑：抗锯齿； -webkit盒阴影：0 0px 7px rgba0,0,0,0.4； 盒影：0px7pxRGBA0,0,0,0.4； /*填充：6px 10px*/ 颜色：白色； 字体系列：helvetica； 字号：600； 字号：1rem； 边界半径：24px； 宽度：自动； } @仅介质屏幕，最大宽度：800px{ .粘扣{ 宽度：自动； 字体大小：0.8rem； } } @仅介质屏幕，最大宽度：450px{ .粘扣{ 宽度：自动； 字体大小：0.8rem； } } .粘性按钮说明{ 颜色：hsla0,0%，100%，0.75； 字体大小：12px； 线高：1.4em； 字母间距：正常； 字体大小：12px； 线高：1.4em； 字体大小：400； 字体系列：helvetica； 显示：内联； 字母间距：正常； } @仅介质屏幕，最大宽度：450px{ .粘性按钮说明{ } } .粘扣断裂{ 填充：0.3rem； } /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ /*集装箱视频*/ .断开{高度：200px； 宽度：100%； 背景：黑色； 保证金：0； 填充：0；} .break-2{高度：900px； 宽度：100%； 背景：红色； 保证金：0； 填充：0；} .btn-1{ 边界：无； 边界半径：24px； 颜色：白色； 背景色：3e3e； 填充：10px 18px； 字体大小：16px； 宽度：100%； 光标：指针； 大纲：无； 溢出：隐藏； 盒影：0px 12px 20px-12px rgba0,0,0,0.6； 转变：转变。3s轻松； z指数：100； } .btn-1：活动{ 转换：缩放10.9； 不透明度：0； z指数：20； 转变：转变。3s轻松； z指数：100； } .btn-2{ 边界：无； 边界半径：24px； 颜色：白色； 背景色：3e3e； 填充：10px 18px； 字体大小：16px； 宽度：100%； 光标：指针； 大纲：无； 溢出：隐藏； 盒影：0px 12px 20px-12px rgba0,0,0,0.6； 转变：转变。3s轻松； z指数：50； } .btn-2：活动{ 位置：粘性； 转换：缩放10.9； z指数：50； } .btn-3{ 边界：无； 边界半径：24px； 颜色：白色； 背景色：3e3e； 填充：10px 18px； 字体大小：16px； 宽度：100%； 光标：指针； 大纲：无； 溢出：隐藏； 盒影：0px 12p x 20px-12px rgba0,0,0,0.6； 转变：转变。3s轻松； z指数：30； } .btn-3：激活{ 转换：缩放10.9； z指数：30； } /*模态*/ .覆盖{ 位置：固定； 溢出：隐藏； 排名：0； 右：0； 底部：0； 左：0； 背景：黑色；/*rgba0,0,0,55*/ 指针事件：无； } .叠加，.模态{ 不透明度：0； 过渡：.5s； } .覆盖打开{ 不透明度：1； 指针事件：自动； } .覆盖打开.模态{ 不透明度：1； 转化：无； } .莫代尔{ 位置：固定； 宽度：100%； 保证金：15vh自动0； 背景：黑色； 颜色：fff； 变换：变换80%尺度； 过渡时间功能：三次贝塞尔。3，0，0，1.3； 转换延迟：.4s； 文本对齐：居中； 字号：26px； 字体大小：400； } /*模态触发器*/ /*模态触发器*/ 开放模态 &时代；

---

标题说明-1从未调用closeModal，因此从未删除overlay open类。运行的唯一代码是onclick属性中的document.getElementById'YourModalBox'。style.display='none'，因此模式将永久隐藏。而当您单击模式关闭按钮时，则不会。编辑：那个HTML示例没有调用函数。很棒的@Libin-Prasanth工作得很好！当模态打开时，我应该添加什么来避免滚动？添加溢出：隐藏；当弹出窗口打开并关闭后删除时，请参见上面编辑的代码