使用classList.add()实现view more模态框开关功能失效如何排查

问题原因及修复方案 #

你代码里一共存在4处影响模态框功能的错误，按优先级排序修复即可：

1. JS移除类名拼写错误 #

关闭模态框的代码中，类名拼写顺序错误：
原代码：

modalView.classList.remove('active-mdoal')

修改为：

modalView.classList.remove('active-modal')

将mdoal调整为正确的modal顺序即可。

2. CSS注释格式错误 #

CSS里的Active Modal是纯文本没有加注释标记，导致下方的.active-modal选择器无法被浏览器识别：
原代码：

Active Modal 
.active-modal {
  opacity: 1;
  visibility: visible;
}

修改为：

/* Active Modal */
.active-modal {
  opacity: 1;
  visibility: visible;
}

3. 模态框过渡属性单位错误 #

.services__modal的transition属性误用了长度单位rem，应该使用时间单位s：
原代码：

transition: 0.3rem;

修改为：

transition: 0.3s;

4. 可选：HTML类名拼写修正（不影响模态框开关，仅影响列表样式） #

HTML里多处把services拼写为serivces，比如<ul class="serivces__modal-services grid">、<li class="services__modal-secrives">，统一修正为正确拼写即可匹配对应CSS样式。

内容的提问来源于stack exchange，提问作者dammam2030