Bootstrap模态 – 隐藏一个然后显示另一个

我一直在使用jQueryUI很长一段时间，但最近由于审美原因转而使用Bootstrap。 我现在正在努力解决我期望的一个简单的问题，并想知道是否有其他更熟悉Bootstrap的人可以帮助我。

我有一个用于动态创建对话框的通用函数，有时候我会显示一个没有按钮的对话框（当处理某些东西时），然后将它交换到一个有按钮的对话框（进程完成 – 单击OK，for例）。 我不打算在这里定义一个设置过程，所以我基本上说我希望能够关闭一个对话框并在需要时打开另一个对话框。 这就是问题所在。

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

我已经把一个jsfiddle放在一起来certificate这个问题。 您可以单击第一个对话框上的关闭按钮以查看淡出动画应该是什么样子。

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

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

TL;博士

查看jsfiddle – 单击“显示对话框2” – 单击“确定”。 我想在最后摆脱黑色闪光。

CSS

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

HTML

 
 
 
 
 
Modal Dialog 1
 
 
This is the first modal dialog
 
 Show dialog 2 Close 
 
 
 
 
 
 
 
 
Modal Dialog 2
 
 
This is the second modal dialog
 
 OK 
 
 
  

JavaScript的

 function showDialog2() { $("#dialog1").removeClass("fade").modal("hide"); $("#dialog2").modal("show").addClass("fade"); } $("#dialog1").modal("show"); $("#dialog-ok").on("click", function() { showDialog2(); }); 

Answer 1

更新 ：

我为你的最后一个按钮添加了一个click()处理程序，添加了一个测试标识符id="test" ，其中对话框和背景随着fadeOut()效果逐渐fadeOut() 。 重要的是淡出元素.modal-backdrop ，它封装了对话框和背景：

 $("#test").on("click", function () { $(".modal-backdrop").fadeOut("slow"); }); 

的jsfiddle

Answer 2

好吧，我不想回答我自己的问题，但我有一个100％万无一失的解决方案（据我所知）。 我最终找到了一个检查现有对话框并修改它的解决方案，而不是隐藏它并显示一个新对话框。

这是一个工作的jsfiddle（在ajax调用中使用echo，它通常会加载一个html模板）…

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

代码是我正在处理的更大的库的一部分，但无论如何我都会在这里发布，因为它可能对其他人有用。

JavaScript库

 (function () { var _defaultOptions = { backdrop: "static", close: true, keyboard: true }; window.bootstrap = { modal: { show: function (options) { options = $.extend(_defaultOptions, options); var buttonText = ""; for (var key in options.buttons) { options.buttons[key].id = "button_" + key.split(" ").join(""); var button = options.buttons[key]; buttonText += "" + key + ""; } $.ajax({ url: "templates/bootstrap-modal.html" }) .done(function (data) { data = data .replace("{:Title}", options.title) .replace("{:Body}", options.body) .replace("{:Buttons}", buttonText); var $modal = $("#bootstrap-modal"); var existing = $modal.length; if (existing) { $modal.html($(data).find(".modal-dialog")); } else { $modal = $(data).appendTo("body"); } for (var key in options.buttons) { var button = options.buttons[key]; if (typeof (button.callback) !== undefined) { $("#" + button.id).on("click", button.callback); } } $modal.off("shown.bs.modal").on("shown.bs.modal", function(e) { if (typeof(options.onshow) === "function") { options.onshow(e); } }); if (!existing) { $modal.modal(options); } if (options.large === true) { $modal.find(".modal-dialog").addClass("modal-lg"); } if (options.close === false) { $modal.find("button.close").remove(); } }); }, hide: function (callback) { var $modal = $("#bootstrap-modal"); if (!$modal.length) return; $modal.on("hidden.bs.modal", function(e) { $modal.remove(); if (typeof(callback) === "function") { callback(e); } }); $modal.modal("hide"); } } }; })(); 

模板HTML

 
 
 
 
 ×Close 
{:Title}
 
 
{:Body}
 
 {:Buttons} 
 
 
  

用法示例：

 bootstrap.modal.show({ title: "Dialog Title", body: "
This is the dialog body and can contain any old html rubbish.
", buttons: { Close: { dismiss: true } } }); 

其他选项解释

 bootstrap.modal.show({ backdrop: true, // show the backdrop close: true, // show the close button keyboard: true, // allow the keyboard to close the dialog title: "Dialog Title", body: "
This is the dialog body and can contain any old html rubbish.
", buttons: { Button1: { class: "btn-primary", // any class you want to add to the button dismiss: false, // does this button close the dialog? callback: function() { // button click handler // the button was clicked - do something here } }, Button2: { // options as defined as above. You can have as many buttons as you want } }, onshow: function(e) { // this will trigger when the dialog has completed the show animation } }); 

和

 bootstrap.modal.hide(function(e) { // this will trigger when the dialog has completed the hide animation }); 

show()方法中的所有选项都是可选的，但显然你需要一个标题和一个正文。

Answer 3

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

}

你想成为这样的人

Answer 4

我已经编码了如何在打开另一个之前关闭打开的模态。

 $('[data-toggle="modal"]').on('click', function() { //On click a button which call a modal if(($(".modal").data('bs.modal') || {}).isShown){ //If a modal is shown var modal = $(".modal.in"); // Get the current element $(modal).modal('hide'); // Hide the current modal } }); 

希望有所帮助！