从第一个模式内的按钮打开另一个模式时的引导模式问题答案

【问题标题】：Bootstrap modal issue when opening another modal from button inside first modal从第一个模式内的按钮打开另一个模式时的引导模式问题
【发布时间】：2015-10-22 02:35:56
【问题描述】：

我有一个打开并显示信息的模式。在模态中，有一个注册按钮。单击该按钮后，它会关闭第一个模式并打开一个新的“注册”模式。当我关闭该模式时出现问题，模式消失但背景仍然不透明，我无法访问它后面的页面。这是我的代码。我希望模态在单击任何按钮时完全关闭或像默认行为一样关闭模态本身。

<div class="modal fade" id="register-for-fame" tabindex="-1" role="dialog" aria-labelledby="registerForFame">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="registerForFame">Register For Fame</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Some text
                    </p>
                    <p>
                        more text
                    </p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary flow-left" data-dismiss="modal">
                    Not right now
        </button>
                    <button type="button" class="btn btn-primary register-user" data-dismiss="modal">
          <a href="#" data-toggle="modal" data-target=".register-user">want to register!</a>
                    </button>
                </div>
            </div>
        </div>
    </div>
<div class="modal fade register-user" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm">
    <div class="modal-content padding-sides">
      <h3 class="center">Register!</h3>
      </br>
      <input type="text" class="form-control" id="user-name" size="30" placeholder="Username:">
      </br>
      <input type="text" class="form-control" id="password" size="30" placeholder="Password:">
      </br>
      <input type="text" class="form-control" id="confirmation-password" size="30" placeholder="Confirm Password:">
      </br>
      <input type="text" class="form-control" id="email-address" size="30" placeholder="Email (optional):">
      </br>
      <p>some text</p>
      <button type="button" class="btn btn-primary flow-left" data-dismiss="modal" data-toggle="modal">
        Not right now
      </button>
      <button type="button" class="btn btn-primary submit-registration flow-right" data-dismiss="modal" data-toggle="modal">
        Register me!
      </button>
    </div>
  </div>
</div>

【问题讨论】：

只是一个建议：jQuery 插件 - github.com/jschr/bootstrap-modal

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

您的代码中有一个错误：

<button type="button" class="btn btn-primary register-user" data-dismiss="modal">
  <a href="#" data-toggle="modal" data-target=".register-user">want to register!</a>
</button>

查看您的数据目标（您的按钮具有 register-user 类）。

将目标更改为#register-user 并将id="register-user" 添加到您的第二个模式中。

【讨论】：