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

Question

我不确定这是否可以完成，但非常感谢您的帮助。我已经阅读了 bootstrap 3 模态的文档。我还没有看到用户在模式中单击 "save" 按钮后如何执行我要演示的操作的示例。我正在尝试制作一个模拟模态关闭后内容隐藏和显示的演示。这是用例的伪代码：

用户在 UI

save

单击 save 会启动 modal window
用户在模式中单击 save 按钮（使用 data-dismiss 属性 "save" 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.");
});

Fiddle to view/edit

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/

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

show different content when bootstrap 3 modal closes

jquery

modal-dialog

savechanges

twitter-bootstrap-3