模态框弹出时为body添加样式、关闭时移除的代码失效，求解决

嘿，我来帮你排查下代码为啥没起作用，主要有两个关键问题：

1. jQuery方法用错了 #

你写的$('body').style({ 'overflow': "hidden" });是错误的——style()是原生DOM元素的方法，但你用的是jQuery对象，得换成jQuery的.css()方法才行。

2. 只做了单次判断，没监听模态框状态变化 #

你的代码只是在某个时刻判断了一次模态框是否有in类，但模态框的显示/关闭是动态操作的，你需要监听它的显示/隐藏事件，才能在状态变化时触发样式修改。

正确的实现方案（针对Bootstrap模态框） #

因为你的示例是Bootstrap模态框，它提供了专门的事件来监听弹出和关闭：

• show.bs.modal：模态框开始显示时触发
• hidden.bs.modal：模态框完全关闭后触发

直接用这些事件来绑定样式修改逻辑就好：

// 模态框弹出时给body加overflow:hidden
$('.modal').on('show.bs.modal', function() {
  $('body').css('overflow', 'hidden');
});

// 模态框关闭时恢复body的overflow样式
$('.modal').on('hidden.bs.modal', function() {
  $('body').css('overflow', 'auto');
});

为啥这个能行？ #

• 每次模态框触发弹出/关闭动作时，对应的事件会自动触发，我们就可以在事件回调里动态修改body的样式。
• 用jQuery的.css()方法正确操作元素样式，替代了你之前错误的.style()调用。

如果你不想用事件，非要通过监听in类的变化，也可以用MutationObserver来监听模态框的类变化，但显然用Bootstrap自带的事件更简单靠谱～

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