在引导3模式关闭时显示不同的内容

Question

我不确定是否能做到，但我很感谢你的帮助。我已经阅读了引导3模式的文档。在用户单击模式中的“保存”按钮后，我还没有看到如何进行演示的示例。我正在尝试安装一个模拟内容隐藏和显示在模式关闭后的演示。下面是用例的伪代码：

• 用户单击UI中页面上的save按钮
• 单击save启动一个modal窗口
• 用户单击模式中的save按钮(使用data-dismiss攻击“保存”btn)
• 模态关闭
• 启动模式的页面内容(包含第一个保存按钮)逐渐消失，不同的内容逐渐消失。

这个是可能的吗？不确定我是在模态内使用正确的方法(hidden.bs.modal)，还是使用正确的data-*属性，或者href应该在a标记中指向什么位置。或者我试图演示的东西甚至是可能的。

所有内容都位于设置为display:none的同一页上，直到调用隐藏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)。但是，请注意，即使用户单击cancel或退出'x‘，这也会触发。那是因为只有当模式被隐藏时，你才会约束你的行为。也许您应该只在用户单击“保存”时才这样做。

这是最新的Fiddle和它的工作！http://jsfiddle.net/srf8hrux/5/