Question

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

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

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

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

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

但这似乎不起作用。我试着看看打开其他可滚动模态的流程，似乎它正在添加＆＃39;模态打开＆＃39;在身体上课。当我打开模态但仍然无法正常工作时，我尝试添加它。我没有想法试图解决这个问题。有谁遇到过这个问题？请让我知道你的见解。谢谢:)）

BTW：我在这里使用角度，如果我添加它会起作用（data-target =＆＃39; #targetModal＆＃39;，data-dismiss =＆＃39; modal＆＃39;）但是我添加了ng -click属性在继续之前首先执行验证功能。

Answer 1

在这里，您将使用示例解决方案http://jsfiddle.net/h3WDq/2132/

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

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

当您第一次 模式 点击关闭按钮时，第二模式将会显示。

jquery上的Bootstrap Backdrop滚动打开了模态

1 个答案: