Question

我有一个模态对话框（＃busyIndicator＆＃39;），基本上是ID Pur up.Pur 2 0 1 2 1 2 2 2 3 2 3 NA 3 1 2 3 2 NA 5 4 5 5 5 NA。有时操作完成得太快，因此对话基本上是癫痫，导致Please Wait和$("#busyIndicator").modal('show');之间的模糊。

有没有一种很好的方法来隐藏模式，它会以淡出的方式引入延迟？我试过了$('#busyIndicator').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>

Answer 2

通常，您将JS作为$.fadeOut()的回调运行，以便回调中的JS等待$.fadeOut()先完成。

$('#busyIndicator').fadeOut(2000,function() {
  $(this).modal('hide');
});

Answer 3

Bootstrap模式默认淡入淡出，它们的css中设置了过渡设置。但是，如果要更改渐变速度，请使用此选项;

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

它应该使衰落方式太慢，但是你可以通过将过渡时间从1秒增加到更小的东西来调整速度，比如30秒。

Answer 4

使用setTimeout方法。这是我发现的最简单有效的方法。

setTimeout(function() {
  $(your_modal).modal('hide');
}, 4000);

如何让bootstrap模式对话框慢慢淡出

4 个答案: