点击Register链接后无法关闭Bootstrap模态框，求解决方法

我来帮你捋清楚这个问题～你现在的写法踩了两个小坑：一是直接修改style.display来隐藏模态框不是Bootstrap推荐的方式，因为Bootstrap模态框有自己的状态管理逻辑（比如遮罩层控制、动画类的添加移除）；二是你的jQuery写法有误，$('#popup')是jQuery对象，没有.style这个原生DOM属性哦。

下面给你两种靠谱的解决方案，都是用Bootstrap官方的模态框API来处理，保证状态不会乱：

方案一：手动控制模态框的关闭与打开 #

这种方法更灵活，能确保原模态框完全关闭后再打开新的注册模态框：

第一步：调整HTML链接 #

可以把链接里的data-toggle和data-target先去掉，我们用JS手动触发：

<a href="javascript:void(0)" id="close">Register</a>

<!-- 原模态框容器 -->
<div id="popup">
  <div class="modal fade" id="originalModal" tabindex="-1" role="dialog">
    <!-- 你的原模态框内容 -->
  </div>
</div>

<!-- 注册模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
  <!-- 注册模态框内容 -->
</div>

第二步：编写JS事件处理 #

用Bootstrap的modal('hide')方法关闭原模态框，modal('show')打开新模态框，记得把代码放在DOM加载完成的回调里：

$(document).ready(function() {
  $("#close").on('click', function() {
    // 关闭原模态框
    $('#originalModal').modal('hide');
    // 加个小延迟，让原模态框的关闭动画完成后再打开新的，体验更顺畅
    setTimeout(function() {
      $('#myModal2').modal('show');
    }, 300);
  });
});

方案二：保留原有链接属性，阻止默认行为后处理 #

如果你不想改HTML结构，也可以保留data-target，但要阻止默认的模态框触发行为，避免同时打开两个模态框：

$(document).ready(function() {
  $("#close").on('click', function(e) {
    // 阻止链接默认的模态框打开行为
    e.preventDefault();
    // 关闭原模态框（这里假设#popup就是原模态框的根元素）
    $('#popup').modal('hide');
    // 打开注册模态框
    $('#myModal2').modal('show');
  });
});

关键提醒： #

• 一定要用Bootstrap提供的modal('hide')方法关闭模态框，而不是手动修改display样式，不然会导致遮罩层残留、模态框状态混乱的问题。
• 确保你已经正确引入了Bootstrap的JS文件（依赖jQuery），不然这些API没法生效哦。

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