javascript - 按顺序显示 Bootstrap 模式对话框

Question

我有一个 Bootstrap 模式对话框，当选择"is"时，它会返回一个已解决的 promise 。当 promise 得到解决后，模式应该再次显示。显示模态框的行被点击，但模态框不显示。我做错了什么？

$(function() {
  showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
    .done(function() {
      alert('You selected Yes once!');
      showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
        .done(function() {
          alert('You selected Yes twice!');
        });
    });
});

function showModalDialog(title, message, button1Caption, button2Caption) {
  var deferred = $.Deferred();
  $('#modalTitle').html(title);
  $('#modalMessage').html(message);
  $('#modalButton1').html(button1Caption);
  $('#modalButton2').html(button2Caption);
  $('#modalButton1').one('click', function() {
    deferred.resolve();
  });
  $('#modalButton2').one('click', function() {
    deferred.reject();
  });
  $('#modalDialog').one('hidden.bs.modal', function() {
    //remove the handler for the button in case it was never invoked, otherwise it will
    //still be there the next time the dialog is shown
    $('#modalButton1').off('click');
    deferred.reject();
  })
  $('#modalDialog').modal();
  return deferred.promise();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
        <h4 class="modal-title" id="modalTitle"></h4>
      </div>

      <div class="modal-body" id="modalMessage"></div>

      <div class="modal-footer">
        <button type="button" id="modalButton1" class="btn btn-default" data-dismiss="modal"></button>
        <button type="button" id="modalButton2" class="btn btn-default" data-dismiss="modal"></button>
      </div>
    </div>
  </div>
</div>

Answer 1

都怪动画! :)

隐藏模式的动画需要一些有限的时间才能完成。如果您尝试在此期间再次“显示”模态，则它将不起作用。一个简单的解决方法是稍微延迟“显示”操作。

例如，延迟一秒就可以了:

setTimeout(function() {
    showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
      .done(function() {
        alert('You selected Yes twice!');
      });
}, 1000);

$(function() {
  showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
    .done(function() {
      alert('You selected Yes once!');
      
      setTimeout(function() {
        showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
          .done(function() {
            alert('You selected Yes twice!');
          });
      }, 1000);
    });
});

function showModalDialog(title, message, button1Caption, button2Caption) {
  var deferred = $.Deferred();
  $('#modalTitle').html(title);
  $('#modalMessage').html(message);
  $('#modalButton1').html(button1Caption);
  $('#modalButton2').html(button2Caption);
  $('#modalButton1').one('click', function() {
    deferred.resolve();
  });
  $('#modalButton2').one('click', function() {
    deferred.reject();
  });
  $('#modalDialog').one('hidden.bs.modal', function() {
    //remove the handler for the button in case it was never invoked, otherwise it will
    //still be there the next time the dialog is shown
    $('#modalButton1').off('click');
    deferred.reject();
  })
  $('#modalDialog').modal();
  return deferred.promise();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
        <h4 class="modal-title" id="modalTitle"></h4>
      </div>

      <div class="modal-body" id="modalMessage"></div>

      <div class="modal-footer">
        <button type="button" id="modalButton1" class="btn btn-default" data-dismiss="modal"></button>
        <button type="button" id="modalButton2" class="btn btn-default" data-dismiss="modal"></button>
      </div>
    </div>
  </div>
</div>

注意:我还没有检查源代码或对这些模式进行足够的实验，无法了解完成这项工作所需的最小延迟量。但无论如何，我不介意延迟一秒钟，因为它几乎察觉不到。

更新

如you suggest ，在这种情况下等待 Bootstrap 的 hidden.bs.modal 事件是更好的选择。如 v3 Docs here 中所述:

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

因此，将 promise.resolved 移至 hidden.bs.modal 的事件处理程序也能达到目的。

为此，我添加了一个变量 modalResult 来跟踪用户的选择，并触发 deferred.resolve 或 deferred.reject > 相应地。

$(function() {
  showModalDialog('Confirm1', "Select Yes or No", 'Yes', 'No')
    .done(function() {
      alert('You selected Yes once!');
      
      showModalDialog('Confirm2', "Select Yes or No", 'Yes', 'No')
        .done(function() {
          alert('You selected Yes twice!');
        });
    });
});

function showModalDialog(title, message, button1Caption, button2Caption) {
  var modalResult = false;

  var deferred = $.Deferred();
  $('#modalTitle').html(title);
  $('#modalMessage').html(message);
  $('#modalButton1').html(button1Caption);
  $('#modalButton2').html(button2Caption);
  $('#modalButton1').one('click', function() {
    // Wait for the modal to get hidden.
    // deferred.resolve();
    modalResult = true;
  });
  $('#modalButton2').one('click', function() {
    // Wait for the modal to get hidden.
    // deferred.reject();
    modalResult = false;
  });
  $('#modalDialog').one('hidden.bs.modal', function() {
    //remove the handler for the button in case it was never invoked, otherwise it will
    //still be there the next time the dialog is shown
    $('#modalButton1').off('click');
    
    if(modalResult) {
      deferred.resolve();
    } else {
      deferred.reject();
    }
  })
  $('#modalDialog').modal();
  return deferred.promise();
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
        <h4 class="modal-title" id="modalTitle"></h4>
      </div>

      <div class="modal-body" id="modalMessage"></div>

      <div class="modal-footer">
        <button type="button" id="modalButton1" class="btn btn-default" data-dismiss="modal"></button>
        <button type="button" id="modalButton2" class="btn btn-default" data-dismiss="modal"></button>
      </div>
    </div>
  </div>
</div>