HTML inert 属性

HTML inert属性(使元素及其子树不可交互/隐藏于无障碍树)：inert布尔属性、焦点跳过inert区域、等同于暂时标记为aria-hidden并禁用交互、Modal打开时让背景main内容inert · 难度：入门 · +10XP

HTML inert 属性 —— 让整个区域冻结

打开模态弹窗时，弹窗后面的内容应该不可点击、不可Tab过去、屏幕阅读器忽略。inert属性就是实现这个的。

基本用法

<div inert>
  这个区域的所有内容都不能被点击和聚焦
  <button>点不了我</button>
</div>

弹窗场景配合

function openModal() {
  document.getElementById('main').inert = true;  // 冻结背景
}
function closeModal() {
  document.getElementById('main').inert = false; // 解冻背景
}

动手练习

1. 基础练习：做有3个按钮的页面，点冻结全部不可点，点解冻恢复。
2. 进阶应用：配合dialog做弹窗——打开时背景inert，关闭时取消。
3. 项目实战：做教程引导——用户首次访问显示引导提示，背景inert直到关闭引导。