Bootstrap模态框阻止侧边栏输入框输入问题求助

嘿，我之前也踩过这个Bootstrap模态框的坑！你的问题根源其实不是z-index的层级堆叠，而是Bootstrap模态框打开时给body加的一个样式搞的鬼。

问题原因拆解 #

当Bootstrap模态框处于打开状态时，它会给<body>标签添加一个modal-open类，这个类里有个关键样式：

body.modal-open {
  pointer-events: none;
}

这个样式的目的是阻止模态框之外的元素响应指针事件，但它会继承给所有子元素——哪怕你的侧边栏z-index设到9999，层级在模态框上面，它的输入框还是会因为继承了这个pointer-events: none而无法获取焦点，自然没法输入内容。而链接能正常点击，是因为链接的点击事件逻辑没有被完全阻断，但本质上这也是个潜在问题，只是你没碰到而已。

你说隐藏模态框背景层也没用，这很正常——因为modal-open类还是挂在body上，那个pointer-events: none的样式依然生效。

快速解决方案 #

给你的侧边栏添加一段CSS，强制让它在模态框打开时能响应指针事件：

/* 替换成你实际的侧边栏类名 */
body.modal-open .your-sidebar-class {
  pointer-events: auto;
}

这样设置后，侧边栏的所有子元素（包括输入框）就能正常获取焦点、输入内容，链接也能保持正常点击。同时因为侧边栏的z-index是9999，比模态框的1040高，它依然会显示在模态框上方，完全符合你想要的堆叠效果。

验证效果 #

设置完之后再测试：打开模态框→打开侧边栏→点击输入框，就能正常输入了；关闭模态框后，一切也会恢复正常，不会有其他副作用。

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