求助：实现点击Login按钮关闭模态框及解决页面变暗的bug

看起来你遇到了Bootstrap模态框的常见小bug——点击Login按钮关闭模态框后，页面的暗色遮罩层（modal-backdrop）没有被正确清理，导致页面一直处于无法正常交互的变暗状态。下面给你几个针对性的解决方案：

方案1：用Bootstrap原生属性触发完整关闭流程 #

如果你的Login按钮在模态框内部，最简单的方式是给按钮添加Bootstrap的data-dismiss="modal"属性，同时结合JS处理表单提交逻辑（避免直接提交导致模态框关闭不完整）：

<!-- 模态框内的Login按钮 -->
<button type="submit" class="btn btn-danger pull-right" data-dismiss="modal" id="loginSubmitBtn">Login</button>

然后添加JS代码处理表单提交，确保模态框完全关闭后再执行提交：

document.getElementById('loginSubmitBtn').addEventListener('click', function(e) {
  // 先阻止默认的表单提交行为
  e.preventDefault();
  
  // 手动触发模态框的关闭方法，确保Bootstrap清理遮罩层
  $('#exampleModal').modal('hide');
  
  // 延迟执行表单提交，等待模态框关闭动画完成
  setTimeout(() => {
    // 替换成你的表单选择器
    document.querySelector('#yourLoginForm').submit();
  }, 300);
});

方案2：监听模态框关闭事件，手动清理残留元素 #

如果方案1不生效，可能是事件冲突导致Bootstrap没有自动清理遮罩层。可以监听模态框的hidden.bs.modal事件，在模态框完全关闭后手动清理残留的遮罩和body上的类：

$('#exampleModal').on('hidden.bs.modal', function() {
  // 移除残留的遮罩层
  $('.modal-backdrop').remove();
  // 移除body上的modal-open类，恢复页面滚动
  $('body').removeClass('modal-open');
  // 清除Bootstrap添加的右侧内边距（防止滚动条跳动）
  $('body').css('padding-right', '');
});

方案3：排查事件冲突或重复绑定 #

如果页面上有多个模态框，或者你用了自定义JS修改模态框行为，需要检查：

• 确保每个模态框的id是唯一的（比如你的#exampleModal没有重复）
• 避免多次调用$('#exampleModal').modal()，这会导致重复创建遮罩层
• 检查是否有其他JS事件阻止了Bootstrap的模态框关闭流程（比如event.stopPropagation()误用）

问题根源 #

Bootstrap模态框打开时会给<body>添加modal-open类，并生成一个modal-backdrop元素作为遮罩。只有通过Bootstrap官方的关闭方式（data-dismiss="modal"或modal('hide')），才会自动移除这些元素和类。如果你的Login按钮只隐藏了模态框的内容，没有触发Bootstrap的完整关闭逻辑，就会导致遮罩层残留。

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