做过前端开发的同学，对“模态框（Modal）”肯定不陌生。平时写个简单的弹窗，很多人可能就在右上角加个×按钮，或者在底部放个“确定”按钮就完事了。但如果站在用户的角度想一想：如果我正看着弹窗里的内容，手却偏偏够不着鼠标，或者我习惯性地想按Esc键退出，结果发现没反应，是不是会有点抓狂？一个真正“好用”的模态框，应该尽可能提供多种关闭途径，把选择权交给用户。今天我们就用原生的HTML + CSS + JS，来手写一个支持多种关闭方式的模态框。代码非常精简，但交互体验绝对能拉满。效果展示源码拆解1. HTML：清晰的层级结构结构上，我们把弹窗分为遮罩层（.modal）和弹窗主体（.modal-dialog）。这种嵌套结构方便我们后续通过事件委托来处理“点击遮罩关闭”的逻辑。!DOCTYPE html html lang="zh-CN" head meta charset="UTF-8" me