如何在Wicket-Bootstrap模态框打开时修改HTML <body>标签类名？

针对你遇到的执行顺序导致的问题，我给你几个精准的解决方案，毕竟Wicket和Bootstrap的JS交互时机确实容易踩坑：

• 利用Bootstrap模态框的原生事件绑定（最优解）
  Bootstrap模态框提供了一系列生命周期事件，我们可以绑定shown.bs.modal事件（模态框完全显示后触发）来确保修改类的代码在正确时机执行，同时绑定hidden.bs.modal事件在关闭时移除类，避免页面状态异常：

  // 假设你的模态框组件实例是modal
  // 模态框显示完成后添加类
  modal.add(new AjaxEventBehavior("shown.bs.modal") {
      @Override
      protected void onEvent(AjaxRequestTarget target) {
          target.appendJavaScript("document.body.classList.add('modal-open');");
      }
  });
  
  // 模态框关闭后移除类
  modal.add(new AjaxEventBehavior("hidden.bs.modal") {
      @Override
      protected void onEvent(AjaxRequestTarget target) {
          target.appendJavaScript("document.body.classList.remove('modal-open');");
      }
  });
  

  这里之所以用shown.bs.modal而非show.bs.modal，是因为前者是模态框完全渲染并显示后触发，能避免Bootstrap自身的DOM操作覆盖你的修改，完美解决执行顺序问题。

• 检查Wicket-Bootstrap组件的内置逻辑
  如果你使用的是Wicket-Bootstrap官方提供的Modal组件，它本身应该自动处理modal-open类的添加和移除。如果没生效，可能是以下原因：

  • 你引入的Wicket-Bootstrap版本和Wicket 8 M8不兼容（Wicket 8对应Wicket-Bootstrap 3.x系列）；
  • 模态框组件初始化时没有正确配置，比如缺少必要的Bootstrap JS/CSS依赖；
  • 自定义的JS代码干扰了Bootstrap的原生逻辑。

• 临时应急方案（不推荐长期使用）
  如果你需要快速验证，可以给你的JS代码加一个微小的延迟，确保它在Bootstrap的模态框逻辑之后执行：

  target.appendJavaScript("setTimeout(function(){ document.body.classList.add('modal-open'); }, 100);");
  

  这个方案本质是靠延迟规避顺序问题，但不够优雅，可能在不同环境下出现不稳定情况，仅作为临时测试用。

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