javascript - 如何让 Bootstrap 模式对话框慢慢消失

Question

我有一个模式对话框 (#busyIndi​​cator')，它基本上是说 请稍候。有时操作完成得太快，所以对话本质上是 $("#busyIndi​​cator").modal('show'); 和 $('#busyIndi​​cator') 之间的癫痫诱发模糊.modal('隐藏');。

是否有一种很好的方法来隐藏在淡出方式中引入延迟的模式？我尝试了 $('#busyIndi​​cator').fadeOut(2000).modal('hide');，但它似乎不起作用。

Answer 1

输入所需的关闭持续时间和模式选择器。

var timer,
    closingTime = 3000,
    modal = $('#myModal');

modal
    .on('hide.bs.modal', function (e) {
        if (timer) {
            timer = false;
        } else {
            e.preventDefault();
            timer = true;
            modal.animate({
                opacity: 0
            }, closingTime - 150, function () {
                modal.modal("hide");
            })
        }
    })
    .on('hidden.bs.modal', function () {
        modal.css({
            opacity: 1
        })
    })

.center-me {
   min-height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

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


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="center-me">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Open modal
  </button>
</div>