当bootstrap 3模式关闭时显示不同的内容

Question

我不确定是否可以做到这一点，但我很感激一些帮助。我已经阅读了bootstrap 3 modal的文档。我还没有看到一个例子，说明如何在用户点击模式中的"保存"按钮后进行演示。我正在尝试制作一个演示，模仿模态关闭后隐藏和显示的内容。以下是用例的伪代码：

• 用户在UI中单击页面上的save按钮
• 单击save启动modal窗口
• 用户单击模式中的save按钮（使用"保存"时的data-dismiss属性（btn）
• 模式关闭
• 启动模式淡入淡出的页面内容（包含第一个保存按钮）不同的内容逐渐消失

这可能吗？不确定我在模态（hidden.bs.modal）中使用的是正确的方法，还是正确的data-*属性，或者href应该在a标记中指向哪里。或者，如果我试图演示的内容是可能的。

所有内容都在同一个页面上，该页面设置为display:none，直到我在包含我想在modal关闭后显示的内容的隐藏div上调用fadeIn()方法，替换初始页面内容。

下面的代码是初级的，不起作用，但希望如果上面的用例不清楚，你可以阅读我试图做的事情，并帮助我。

HTML

<a href="#" data-dismiss="modal" class="btn btn-primary savethis">Save</a>
<a href="#" data-dismiss="modal" class="btn btn-primary cancelthis">Cancel</a>

jQuery

$(".savethis").on("hidden.bs.modal", function(){
   $("#currContent").fadeOut(function(){
       $("#replacingContent").fadeIn("slow");
   });
   console.log("Modal has completely closed and old content replaced.");
});

滚动查看/编辑

Answer 1

试试这个：

$('#savethis-modal').on('hidden.bs.modal', function () {
       $("#currContent").fadeOut("slow");
       $("#replacingContent").fadeIn("slow");
       console.log("Modal has closed and old content replaced.");
})

你只是把功能搞得很奇怪。这只是一个动作（FadingOut）和另一个（FadingIn）同时发生。但是，请注意，即使用户单击取消或退出"x"，也会触发此操作。这是因为只有当模态被隐藏时，您才会将操作绑定到。也许只有当您的用户点击保存时，您才应该这样做。

这是更新的Fiddle，它有效！。http://jsfiddle.net/srf8hrux/5/