JS实现模态框点击view more无响应，modalclick参数应放在HTML哪里？

问题原因及解决方案 #

你代码的核心错误出在DOM选择器的使用上，modalclick参数不需要额外添加到HTML标签中，你的原有逻辑是通过遍历按钮的索引作为参数传入，匹配对应序号的模态框，只要修正选择器就能正常运行。

具体错误点： #

• document.querySelector()只能匹配第一个符合规则的元素，你要选中所有按钮、模态框、关闭按钮，必须改用document.querySelectorAll()
• 关闭按钮的选择器漏写了类名前缀的.，导致没有选中任何关闭元素

修正后的JS代码： #

// 修正选择器
const mviews = document.querySelectorAll('.s_modal'),
  mbtns = document.querySelectorAll('.s_button'),
  mcloses = document.querySelectorAll('.s_modal-close');

// modalclick就是传入的按钮索引，用来对应第N个模态框
let modal = function(modalclick) {
  mviews[modalclick].classList.add('act-modal');
}

// 遍历所有view more按钮，点击时把当前按钮的索引作为modalclick参数传入
mbtns.forEach((mbtn, i) => {
  mbtn.addEventListener('click', () => {
    modal(i);
  });
});

// 关闭按钮逻辑
mcloses.forEach((mclose) => {
  mclose.addEventListener('click', () => {
    mviews.forEach((mview) => {
      mview.classList.remove('act-modal');
    });
  });
});

可选补充： #

你可以给.s_modal默认添加如下样式，实现平滑的弹出效果：

.s_modal {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease;
  /* 你自己原本的定位等样式保留即可 */
}

内容的提问来源于stack exchange，提问作者Yogesh s Chowdgund