使用bootstrap 3 modal open调用bootbox会使bootstrap modal在bootbox关闭时失去焦点
当你使用Bootstrap 3的模态框（modal）和Bootbox.js库时，确实可能会遇到这个问题。这是因为Bootbox.js在创建弹出框时会移除Bootstrap模态框的焦点，导致Bootstrap模态框在Bootbox关闭时失去焦点。
要解决这个问题，你可以尝试以下方法：
方法一：使用Bootstrap的模态框API
- 初始化Bootstrap模态框： 确保你的Bootstrap模态框已经正确初始化。 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> Modal content goes here. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
- 使用Bootstrap的模态框API打开和关闭模态框： 使用Bootstrap提供的JavaScript API来控制模态框的显示和隐藏。 $('#myModal').modal('show'); // 打开模态框 $('#myModal').modal('hide'); // 关闭模态框
方法二：手动管理焦点
如果你仍然想使用Bootbox.js，可以手动管理焦点，确保Bootstrap模态框在Bootbox关闭后重新获得焦点。
- 打开Bootbox弹出框： 使用Bootbox.js打开弹出框。 bootbox.dialog({ message: "I am a custom dialog", buttons: { success: { label: "Success!", className: "btn-success", callback: function() { // 关闭Bootbox弹出框后，手动将焦点设置回Bootstrap模态框 $('#myModal').modal('show'); } }, danger: { label: "Danger!", className: "btn-danger", callback: function() { // 关闭Bootbox弹出框后，手动将焦点设置回Bootstrap模态框 $('#myModal').modal('show'); } } } });
- 确保Bootstrap模态框在Bootbox关闭后重新获得焦点：
在Bootbox的回调函数中，手动调用Bootstrap模态框的
show方法。
示例代码
以下是一个完整的示例，展示了如何结合使用Bootstrap模态框和Bootbox.js，并确保Bootstrap模态框在Bootbox关闭后重新获得焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal with Bootbox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
</head>
<body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Modal content goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button id="openBootbox" class="btn btn-primary">Open Bootbox</button>
<script>
$(document).ready(function() {
$('#openBootbox').click(function() {
bootbox.dialog({
message: "I am a custom dialog",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function() {
$('#myModal').modal('show');
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
$('#myModal').modal('show');
}
}
}
});
});
});
</script>
</body>
</html>通过上述方法，你可以确保Bootstrap模态框在Bootbox关闭后仍然保持焦点。
相关·内容
当关闭引导框时，引导模式失去焦点，滚动现在滚动模式后面的页面，而不是模式本身。(因此，滚动会滚动主体，而不是模式本身)。
浏览 16提问于2017-07-10得票数 0
1回答
在输入字段"bootbox1“上发生模糊事件后，我希望对消息使用Bootstrap Modal，在模式关闭后，焦点将转到输入字段"bootbox2”。但是输入字段没有获得焦点。<input type="text" id="bootbox" />
<input type="tex
浏览 0提问于2014-08-15得票数 5
回答已采纳
5回答
我正在使用显示对话框。如果我使用bootbox.confirm、bootbox.alert或bootbox.prompt，当按下escape键或在对话框外单击时，对话框会按预期关闭
浏览 127提问于2014-11-05得票数 21
回答已采纳
我无法捕捉bootbox.confirm对话框的显示事件，以便在显示对话框之前对其进行一些css调整。我尝试了下面这样的方法，但没有成功：$(document).on("show", function(event) {...});
$(document).on("show", ".bootbox", function (event) {...});
浏览 1提问于2014-04-21得票数 13
回答已采纳
JS小提琴：// First dialog message: '<input type="button" value="Opensecond modal" class="second" />' + '<br/>bar'.repeat(100),});
滚动现在会影
浏览 11提问于2017-01-27得票数 4
回答已采纳
3回答
我使用引导3和bootbox.js对我的可过滤组合，我希望能够向下滚动时，一个模式是比浏览器窗口长，但你不应该能够滚动过去的模式。background-clip: padding-box;
outline
浏览 2提问于2014-03-20得票数 0
回答已采纳
2回答
自定义引导盒
、、
我成功地获得了如下所示的输出：
这里我的代码是 closeButton: false,$(".my-popup").find(".modal-footer").prepend(message);
$(".my-popup").find(".modal-footer div").css({"display":&
浏览 6提问于2017-08-01得票数 6
回答已采纳
2回答
我使用的是ajax调用的bootbox.confirm，我得到了确认框，但是我的屏幕灰暗了，我无法选择任何东西。如下所示：我的第一个想法是，也许我的脚本在_Layout中引用错了，但我不确定：@Scripts.Render("~/bundles").Include(
"~/Scripts/bootstrap.js"
浏览 3提问于2017-04-26得票数 0
回答已采纳
我可以在Bootstrap模式中使用一个很小的MCE编辑器，但是我无法在BootBox模式中使用这个编辑器。HTML代码：
<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch bootstrapmodal (works)<&
浏览 10提问于2014-07-23得票数 1
我正在使用来自bootbox.js的，这是相当令人印象深刻的。但是，在设置对话框的位置时，我遇到了问题。 'background-color': '#f99',
'font-we
浏览 11提问于2016-06-27得票数 13
回答已采纳
2回答
我想得到href的文本在模态中。</td> <div class="modal-dialog"> <div class="mo
浏览 1提问于2015-06-11得票数 0
回答已采纳
我想在一个模式中使用jQuery UI datepicker。真正的问题是，如果我也想显示几年或几个月，它就会显示空的选择：使用firebug，选项标签似乎在模式下。这是我的HTML： <div class="modal-content">
<form id="add-form" action="#" method="
浏览 6提问于2014-03-14得票数 3
回答已采纳
2回答
我无法在Bootbox中初始化Bootstrap Typeahead。我试着设置z-index，但可能我做错了。<body>
<a href="#bootbox" onclick="show_bootbox()" class="btn btn-lg btn-danger-- <e
浏览 7提问于2016-09-16得票数 0
回答已采纳
6回答
Bootbox对话框模式引导带4
、、、、
在我的页面上，我有张桌子。在该表的一个单元格内有一个链接。如果单击该链接，我将执行jQuery脚本。例如，如果单击该链接，我希望显示一个引导对话框。使用可以很容易地做到这一点。最初，引导箱甚至不会显示，因为在Bootstrap 3中，显示某些东西的类名是in，但是在Bootstrap 4中，它是show。我已经修好了，但这是目前的样子。<div tabi
浏览 0提问于2018-01-30得票数 14
回答已采纳
我似乎无法自动将焦点设置在Bootbox的文本字段上。下面是我的代码: function setCode(myCode){ });
浏览 0提问于2014-02-09得票数 2
2回答
我在IE (IE 8/ IE 9)上使用Bootbox 4和Bootstrap 3，一切都正常工作。在Bootstrap 3中，你可以像下面这样设置CSS中的模式宽度，但是，这样的设置会改变我所有的模式： width:70% !important;在CSS，jQuery或Bootbox设置中，有没有办法让我只为一个特定的模式更改Boot
浏览 0提问于2014-08-10得票数 8
回答已采纳
我正试图在我的AngularJS应用程序中创建非模态对话框。我正在尝试创建一个可拖动的对话框，它保持活动，而其余的背景可以交互(非模态定义)。这个库：关于如何用最小的依赖关系实现这一点，有什么指示吗？
浏览 4提问于2014-08-04得票数 1
5回答
假设有一个html页面，当我单击一个按钮时，我会看到：“当我点击“确定”按钮时，我需要处理 <div class="modal-content"><button type="button" class="bootbox-close-button close" data-dismiss="
浏览 2提问于2016-09-20得票数 1
我的应用程序中有需要关闭现有modal并立即打开另一个modal的代码。代码运行良好，但第二个模式有一个scrolling issue (垂直/水平)。如果我调整屏幕大小并尝试垂直滚动，则只有背景内容在滚动。我一直在寻找问题所在，这就是我所发现的。我认为有一个时间竞赛条件的问题。strong>' + title + '</strong>', });
dialog.prop("id
浏览 2提问于2020-04-01得票数 1
回答已采纳
我正在使用Bootstrap作为web应用程序，并使用bootbox ()在继续执行删除操作之前显示一个窗口。
对于不同的删除选项，我需要显示不同的消息。我想显示不同宽度的确认窗口。
浏览 3提问于2013-07-02得票数 14
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
