迭代一个列表并逐个显示每个元素的bootstrap模态

Question

我需要通过弹出窗口获取一些问题列表的用户输入。我试图通过迭代列表中的每个问题使用bootstrap模式实现这一点，但我没有得到预期的结果。请参阅下面的代码，

还有其他最合适的循环方法有助于解决我的问题吗？

var askUser = ["how are you?", "what is your age?", "where are you from?"];
index = 0;

iterate(askUser, index);

function iterate(askUser, index){
  if(index < askUser.length){
    showModal(askUser[index], index);
    
  }
}

function showModal(value, index) {
  $('.ask-user').html(value);
  $('#userData').modal('show');
}

$('#modal-submit').click(function() {
  console.log($('#input').value);
  $('#userData').modal('hide');
  iterate(askUser, index++);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="modal fade" id="userData" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <p class="ask-user">Question??</p>
                            <input type="text" id="input" class="form-control">
                            <button type="submit" id="modal-submit"class="btn btn-default pull-right">Submit</button>
                            <div class="clearfix"></div>
                        </div>
                    </div> 
                </div>
            </div> 

Answer 1

这里是带有bootstrap的工作解决方案，正如你所看到我对2秒后显示和隐藏模型的函数进行了递归调用

＆＃13;

＆＃13;

var askUser = ["how are you?", "what is your age?", "where are you from?"];
var $modal = $('#myModal');
var i = 0;

showModal(askUser)

function showModal(arr) {
  $modal.modal('hide');


  setTimeout(function() {
    if (i < arr.length) {
      $('.modal-body').html(arr[i]);
      $modal.modal('show');
      i++;
    }
  }, 400)
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" id="next" class="btn btn-default" onclick="showModal(askUser)">next</button>
      </div>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;