在 jquery 打开的模式上引导背景滚动

Question

我有 2 个模态，第一个模态被触发以获取用户电子邮件。在用户验证了电子邮件地址并单击继续后，它将触发第二个模态，这是一个更长的可滚动模态。现在，这个模式是从代码中以编程方式触发的。

$('#modalEmailSignup').modal('hide');

$('#modalSignupForm').modal('show');

这是我的代码。它工作正常。但问题是第二个模态的可滚动区域是背景。我不确定我是否正确触发了模态。在使用此代码打开新模式之前，我尝试关闭所有模式。

$('.modal .close).trigger('click');

但这似乎不起作用。我尝试查看打开其他可滚动模态的流程，似乎它在正文上添加了“模态打开”类。我尝试在打开模式时添加它但仍然无法正常工作。我没有办法尝试解决这个问题。有没有人遇到过这个问题？请让我知道你的见解。谢谢:)

顺便说一句：我在这里使用 angular，如果我添加 (data-target='#targetModal' ,data-dismiss='modal') 它将起作用，但我之前添加了一个 ng-click 属性来执行验证功能进行中。

Answer 1

这里有一个示例解决方案http://jsfiddle.net/h3WDq/2132/

$('button[btnClass="close"]').click(function(){
	$('#myModal1').modal('hide');
	$('#myModal2').modal({show: true});
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Modal Example</h3>

  <!-- Button to trigger modal -->
  <div>
    <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
  </div>

  <!-- Modal -->
  <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Standard Selectpickers</h3>
    </div>
    <div class="modal-body">

      <select class="selectpicker" data-container="body">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>

    </div>
    <div class="modal-footer">
      <button class="btn" btnClass="close" aria-hidden="true">Close</button>
      <button class="btn btn-primary save">Save changes</button>
    </div>
  </div>

  <!-- Modal -->
  <div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal 2</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

</div>

<style>

在解决方案中， 我有两个模态。 第一个模式将在单击启动 按钮时启动。

当您单击第一个 模态中的关闭按钮时，第二个模态会出现。