javascript - Bootstrap 模式 - 隐藏一个然后显示另一个

Question

我已经使用 jQueryUI 很长时间了，但最近出于审美原因切换到 Bootstrap。我现在正在努力解决我认为是一个简单的问题，并且想知道其他更熟悉 Bootstrap 的人是否可以帮助我解决这个问题。

我有一个动态创建对话框的通用函数，有时我会显示一个没有按钮的对话框(当处理某些东西时)，然后将它切换到一个有按钮的对话框(过程完成 - 点击好的，例如)。我并不想在这里定义一套流程，所以我基本上是说我希望能够关闭一个对话框并在需要时打开另一个对话框。这就是问题所在。

使用 Bootstrap，对话框可以动画进出，我喜欢它并希望保留它。不过，我不想在交换对话框时这样做。我可以通过在第一个对话框显示时从第一个对话框中删除类 fade 以及在显示之前从第二个对话框中删除类来做到这一点，效果很好。然后，我将该类添加到第二个对话框中，使其动画化。但是，当我这样做时动画出错了，背景 div 应该轻轻淡出的地方有一个丑陋的闪光。

我整理了一个 jsfiddle 来演示这个问题。您可以单击第一个对话框上的关闭按钮以查看淡出动画应该的样子。

在我开始深入研究 Bootstrap 源文件之前，我们将不胜感激。

http://jsfiddle.net/ArchersFiddle/0302gLav/1/

tl;dr

查看 jsfiddle - 单击“显示对话框 2”- 单击“确定”。我想去掉最后的黑色闪光。

CSS

@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
.modal {
    display: none;
}

HTML

<div id="dialog1" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Dialog 1</h4>
      </div>
      <div class="modal-body">This is the first modal dialog</div>
      <div class="modal-footer">
        <button type="button" id="dialog-ok" class="btn btn-default">Show dialog 2</button>          
        <button type="button" id="dialog-close" class="btn btn-default" data-dismiss="modal">Close</button>          
      </div>
    </div>
  </div>
</div>

<div id="dialog2" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Dialog 2</h4>
      </div>
      <div class="modal-body">This is the second modal dialog</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>          
      </div>
    </div>
  </div>
</div>

JavaScript

function showDialog2() {
    $("#dialog1").removeClass("fade").modal("hide");
    $("#dialog2").modal("show").addClass("fade");
}

$("#dialog1").modal("show");

$("#dialog-ok").on("click", function() {
    showDialog2();
});

Answer 1

function showDialog2() {
$("#dialog1").removeClass("fade").modal("hide");
$("#dialog2").addClass("fade").modal("show");

你想成为this