Bootstrap模式 - 隐藏一个，然后显示另一个 [英] Bootstrap modal - hide one then show another
问题描述
我已经使用jQueryUI很长时间了，但最近为了美观的原因切换到Bootstrap。我现在正在努力与我期望是一个简单的问题，想知道是否是其他人更熟悉Bootstrap可以帮助我。
我有一个通用函数用于在运行中创建对话框，并且有时候我显示没有按钮的对话框（当处理某些东西时），然后将其交换到具有按钮的对话框（例如，过程完成 - 单击确定）。我不想在这里定义一个设置过程，所以我基本上说，我想要能够关闭一个对话框，并打开另一个需要的时候。这是问题出现的地方。
使用Bootstrap对话框进行动画处理，我喜欢它，想保留它。我不想在交换对话框时做。我可以通过删除类 fade 从第一个对话框中显示，并从第二个对话框之前，它显示，这是伟大的。然后我将类添加到第二个对话框，以便它将动画。但是，当我这样做时动画出错，并且有一个丑陋的闪光灯，其中的背景div应该轻轻地淡出。
我把一个jsfiddle放在一起来演示问题。您可以点击第一个对话框上的关闭按钮，查看淡出动画应该是什么样子。
开始挖掘Bootstrap源文件。
http ：//jsfiddle.net/ArchersFiddle/0302gLav/1/
tl; dr
看看jsfiddle - 点击显示对话框2 - 点击确定。
$ b p $ p>
@import url（// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css）;
.modal {
display：none;
}
HTML
< div id =dialog1class =modal fade>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< h4 class =modal-title>模态对话框1< / h4>
< / div>
< div class =modal-body>这是第一个模态对话框< / div>
< div class =modal-footer>
< button type =buttonid =dialog-okclass =btn btn-default>显示对话框2< / button>
< button type =buttonid =dialog-closeclass =btn btn-defaultdata-dismiss =modal>关闭< / button&
< / div>
< / div>
< / div>
< / div>
< div id =dialog2class =modal>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< h4 class =modal-title>模态对话框2< / h4>
< / div>
< div class =modal-body>这是第二个模态对话框< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal> OK< / button>
< / div>
< / div>
< / div>
< / div>
JavaScript
function showDialog2（）{
$（＃dialog1）removeClass（fade）。
$（＃dialog2）。modal（show）。addClass（fade）;
}
$（＃dialog1）。modal（show）;
$（＃dialog-ok）。on（click，function（）{
showDialog2（）;
}
好吧，我不喜欢回答我自己问题，但我有一个100％的万无一失的解决方案（据我所知）。我最终找到一个解决方案，检查一个现有的对话框并修改，而不是隐藏它，并显示一个新的。
这里是一个工作的jsfiddle echo在ajax调用，它通常加载一个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 + =< button type = \button\+
id = \+ button.id +\+
class = \btn+
（typeof（button.class）==undefined？btn-default：button.class）+\+
typeof（button.dismiss）==undefined？：data-dismiss = \modal\）+> +
key +< / button>;
}
$ .ajax（{
url：templates / bootstrap-modal.html
}）
.done（function {
data = data
.replace（{：Title}，options.title）
.replace（{：Body}，options.body）
.replace （{：Buttons}，buttonText）;
var $ modal = $（＃bootstrap-modal）;
var existing = $ modal.length;
b $ b 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
< div id =bootstrap-modalclass =modal fade>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span class =sr-only>关闭< / span>< / button>
< h4 class =modal-title> {：Title}< / h4>
< / div>
< div class =modal-body> {：Body}< / div>
< div class =modal-footer>
{：Buttons}
< / div>
< / div>
< / div>
< / div>
用法示例：
bootstrap.modal.show（{
title：Dialog Title，
body：< p> This is the dialog body and can contain任何旧的html垃圾。< / p>，
按钮：{
关闭：{
dismiss：true
}
}
}
解释的其他选项
bootstrap.modal.show（{
backdrop：true，//显示背景
close：true，//显示关闭按钮
keyboard：true，//允许键盘关闭对话框
title：Dialog Title，
body：< p>这是对话框的主体，可以包含任何旧的html垃圾。 ; / p>，
buttons：{
Button1：{
class：btn-primary，//任何你想要添加到按钮的类
dismiss：false ，//这个按钮关闭对话框
callback：function（）{//按钮点击处理程序
//点击按钮 - 在这里做一些事情
}
}
Button2：{
//如上定义的选项你可以有任意多的按钮
}
} onshow：function（e）{
//当对话框完成显示动画时触发器
}
}）;
和
bootstrap.modal.hide（function（e）{
//这将触发对话框完成隐藏动画
}）;
show（）方法是可选的，但显然你需要一个标题和一个正文。
I've been using jQueryUI for a long time now but have recently made the switch to Bootstrap for aesthetic reasons. I am now struggling with what I would expect to be a simple issue and wondered if it's something that others more familiar with Bootstrap can help me with.
I have a generic function for creating dialogs on-the-fly and there are occasions where I show a dialog with no buttons (when processing something), and then swap it to a dialog that does have buttons (process complete - click OK, for example). I'm not trying to define a set process here so I'm basically saying I want to be able to close one dialog and open another whenever needed. This is where the problem comes in.
With Bootstrap the dialogs animate in and out, and I like that and want to keep it. I don't want to do it when swapping dialogs though. I can do this by removing the class fade from the first dialog when it shows, and from the second dialog before it shows, and that works great. I then add the class to the second dialog so that it will animate out. However, the animation goes wrong when I do this and there's an ugly flash where the background div should fade out gently.
I've put together a jsfiddle to demonstrate the issue. You can click the close button on the first dialog to see what the fade out animation should look like.
Any help would be appreciated before I start digging into the Bootstrap source files.
http://jsfiddle.net/ArchersFiddle/0302gLav/1/
tl;dr
Look at the jsfiddle - click "show dialog 2" - click "ok". I want to get rid of the black flash at the end.
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();
});
Okay, I don't like to answer my own question, but I've got a solution that is 100% foolproof (as far as I can tell). I've ended up going for a solution that checks for an existing dialog and modifies that, rather than hiding it and showing a new one.
Here's a working jsfiddle (using echo in the ajax call where it normally loads a html template)...
http://jsfiddle.net/ArchersFiddle/0302gLav/9/
The code is part of a larger library I'm working on, but I'll post it here anyway as it may well prove useful to others.
JavaScript Library
(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 += "<button type=\"button\" " +
"id=\"" + button.id + "\" " +
"class=\"btn " +
(typeof (button.class) == "undefined" ? "btn-default" : button.class) + "\" " +
(typeof (button.dismiss) == "undefined" ? "" : "data-dismiss=\"modal\" ") + ">" +
key + "</button>";
}
$.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");
}
}
};
})();
Template HTML
<div id="bootstrap-modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">{:Title}</h4>
</div>
<div class="modal-body">{:Body}</div>
<div class="modal-footer">
{:Buttons}
</div>
</div>
</div>
</div>
Example usage:
bootstrap.modal.show({
title: "Dialog Title",
body: "<p>This is the dialog body and can contain any old html rubbish.</p>",
buttons: {
Close: {
dismiss: true
}
}
});
Further options explained
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: "<p>This is the dialog body and can contain any old html rubbish.</p>",
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
}
});
and
bootstrap.modal.hide(function(e) {
// this will trigger when the dialog has completed the hide animation
});
All the options in the show() method are optional, but obviously you'll want a title and a body.
这篇关于Bootstrap模式 - 隐藏一个，然后显示另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
