开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用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">&times;</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关闭后仍然保持焦点。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

python测试开发django-155.bootbox使用(alert/confirm/prompt/dialog)

Bootbox.js是一个小型的JavaScript库，基于 Twitter 的 Bootstrap 开发，旨在使使用Bootstrap modals更容易！可以自定义alert/confirm/prompt/dialog弹出框

02

手撸的一个快递查询系统，竟然阅读量过1.8w

做这个项目的初衷是因为我去年在微信卖老家水果，好多朋友下单后都问我快递单号，每天发货后我都要挨个甄别这个人是哪个快递信息，很麻烦一部小心就搞错了。基于这件小事我有了自助快递查询的这个想法。将发货的快递信息导入到我的系统里，用户访问我的系统，通过输入手机号就可以查看自己的快递物流信息。项目是去年8月写的，一直搁浅在哪，最近无意间翻看我发的那篇文章自助快递单号查询阅读量竟然都1.8w了，有图有真相。

04

python测试开发django-156.bootbox 垂直居中（上下居中）

bootbox 和 bootstrap modal模态框一样，默认在屏幕上方，左右居中显示。这是老外的习惯，我们一般喜欢上下居中，显示在屏幕中央。

04

jQuery中的常用内容总结(二)

转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html

03

jQuery中的常用内容总结(二)

jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言　　距离上次博客更新已经有二十来天了(●′ω`●)，恍惚之间时间已经从身边流走~，好难过≡(▔﹏▔)≡；所以，我决定这次不管熬夜到几点都要把本节和第三节内容全部写完~ 内容提要 ---- 选择器(上一节) 选择器的扩展方法(上一节) 节点的CSS操作及节点其他操作(上一节) Ajax同步与异步(本节) 事件(本节) 弹窗(本节) 参数序列化(第三节) 遍

jQuery中的常用内容总结(二)

jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言　　距离上次博客更新已经有二十来天了(●′ω`●)，恍惚之间时间已经从身边流走~，好难过≡(▔﹏▔)≡；所以，我决定这次不管熬夜到几点都要把本节和第三节内容全部写完~ ajax在实际开发中用的特别多,尤其是前后端分离的今天甚是~，接下来所说的ajax都是经过jQuery封装过的，至于写法大致有ajax标准写法和jQuery简写两种，下面先给出这两种写

04

【Vue】怎样让你的组件变得更灵活？

在我们的日常开发中，我们一般会引入做的比较成熟的第三方UI框架，比如ElementUI。

01

教你使用HTML5原生对话框元素，轻松创建模态框组件

以前，如果我们想要构建任何形式的模式对话框或对话框，我们需要有一个背景，一个关闭按钮，将事件绑定在对话框中的方式安排我们的标记，找到一种将消息传递出去的方式对话......这真的很复杂。对话框元素解决了上述所有问题。

01

yii2 modal弹窗之ActiveForm ajax表单异步验证

前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题，本以为modal要告一段落可以开始新的话题了，但是实际问题往往超乎想像，这不modal弹窗提交的表单说是怎么验证的问题又出来了，又出来了！

01

分层 Blazor 组件

作为加入单页应用程序 (SPA) 队伍的最新框架，Blazor 有机会在其他框架（如 Angular 和 React）的最佳特性基础之上构建而成。尽管 Blazor 背后的核心概念是利用 C# 和 Razor 来生成 SPA 应用程序，但明显受到其他框架启发的一个方面是使用组件。

01

解决在bootstrap模态框modal里使用clipboard.js时复制失效

当我在bootstrap模态框modal中使用clipboard.js时，复制功能不起作用，但是在模态对话框之外的使用却没有任何问题

02

bootstrap3-dialog打开嵌套iframe窗口

bootstrap3-dialog是一款第三方提示框插件，但是使用过程中感觉对打开新的远程页面不太友好，而打开表单嵌套在原页面中又显得代码非常臃肿，所以对bootstrap3-dialog进行二次封装，将新页面嵌套进dialog，形成全局统一的打开页面方式。

02

yii2 modal弹窗之ActiveForm ajax表单异步验证

前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题，本以为modal要告一段落可以开始新的话题了，但是实际问题往往超乎想像，这不modal弹窗提交的表单说是怎么验证的问题又出来了，又出来了！

02

EasyNVR RTSP转RTMP/HLS流媒体服务器前端构建之：bootstrap弹窗功能的实现

Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

01

【Java AWT 图形界面编程】事件处理机制 ③ ( AWT 中常见的事件和事件监听器 | 低级事件 | 组件事件 | 窗口事件 | 鼠标事件 | 高级事件 | 动作事件 | 事件监听器 )

事件监听器与事件是一一对应的 , 只需要将事件的 Event 改成 Listener 即可 ;

02

多个模态框框，当关闭某一个的时候， body 上面的Class modal-open 被移除了

千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

01

WindowFocusListener窗体焦点监听器

抽象适配器类接收窗口事件。此类中的方法为空。此类存在的目的是方便创建侦听器对象。扩展此类可创建WindowEvent侦听器并重写所需事件的方法。（如果要实现WindowListener界面，你必须定义在它所有的方法。此抽象类定义空对他们的所有方法，这样你就可以只需要针对所关心的事件重写方法。）创建使用扩展的类的监听器对象，然后使用窗口的一个窗口寄存器它addWindowListener方法。当窗口的状态借助于被打开，关闭，激活或去激活，或图标化取消图标化的变化，在收听对象中的相关方法被调用，并且WindowEvent被传递给它

01

对话框、模态框和弹出框看起来很相似，它们有何不同？

Web 平台概念有时可能完全不同，但有时看起来又非常相似。语义、行为和特征可能都很难区分。由于一个新的 popover 属性正在被提出，所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。我们还将了解元素为 modal 时的含义。所有相关的概念看起来都非常相似，至少在我看来是这样的，那就让我们开始吧！

00

Qt 常用类（9）—— QWidget

http://blog.csdn.net/hmsiwtv/article/details/7562015

01

概览 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

是。 CKEditor 5与我们目前所听到的每个JavaScript框架兼容。 CKEditor 5是一个JavaScript富文本编辑组件（相当复杂但仍然如此），它不需要使用任何不常见的技术或技术。因此，除非您使用的框架具有非常典型的限制，否则CKEditor 5与之兼容。

03

Bootstrap 模态框（Modal）插件的基本应用

通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍，可以在不离开父窗体的情况下进行一些互动和内容的交互。

00

python测试开发django-187.Bootstrap模态框(modal)如何在关闭时触发事件

前言 Bootstrap 模态框 (modal) 在关闭时，如何触发一些事件?比如重置表单，或者重置表单的校验。 Bootstrap 模态框 (modal) 提供了4个显示和隐藏模态框的事件。这些事件

03

做好内容安全检测，和风险说「再见」！（上）

随笔川迹: 一个靠前排的90后具有情怀的技匠,路上正追逐斜杠青年的践行者,人人领读发起人。

01

java学习与应用（4.2）--JavaScript、bootstrap

JavaScript，弱类型脚本语言，增强交互和用户体验提高效率等。JavaScript=ECMAScript+JavaScript特有的内容（BOM对象+DOM对象） ECMAScript：与html结合：内部JS（script标签定义，在html文档内部，按位置先后执行），外部JS（script标签引入src元素），注释：当行//，多行/**/，数据类型：原始数据类型（基本，number[整数，小数，NaN not a number]，string，boolean，null，undefined），引用数据类型（对象）变量，var定义，开辟空间不定义类型。赋值可改变类型。document.write输出，添加标签
字符串换行。typeof(变量)关键字，打印数据类型（null是一个object的bug）。运算符，一元运算符：++，--，+-（正号,负号[可以将其他类型转number，无法转换为NaN]），算数运算符：+-*/%，赋值运算符=，+=，-=，比较运算符：>，>=，<，<=，==，!=，类型不同则转换类型比较，===（不转换类型比较）。

01

activity中onResume方法详解[通俗易懂]

onResume 比如做一个音乐播放程序，在播放过程中，突然有电话打进来了，这时系统自动调出电话，而你的音乐播放程序置于后台，触发了onPause方法。当你电话结束后，关闭电话，又自动回到音乐播放程序，此时，触发onResume方法，这时，如果你之前在onPause的时候记录了播放点，就可以在onResume方法里来继续播放。

01

bootstrap的模态框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> //样式必须有，可以在这个地址下载 <script src="https:/

01

vue 2.6 中 slot 的新用法

最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。真正有能力的插槽是什么？

02

JavaScript[对象.属性]集锦

作者：蓝色理想 SCRIPT 标记? 用于包含JavaScript代码.? 属性? LANGUAGE 定义脚本语言? SRC 定义一个URL用以指定以.JS结尾的文件? windows对象?

02

python测试开发django-163.bootstrap-table 表格单元格行内编辑

bootstrap-table 表格行内编辑网上很多资料都是用第三方bootstrap-table-editable.js和x-editable.js实现，不喜欢折腾的用插件实现最快。我想要的需求其实很简单，直接点击表格编辑就行，不需要太多复杂的功能，官方文档上给的资料少的可怜，这方面的资料网上查阅了很多，总结来说很乱，没注释，代码不全，并且还有一些BUG。于是花了3个晚上，头发掉了一大串，现在终于弄清楚了，整个的实现方式。

01

python测试开发django-122.bootstrap模态框(modal)学习

模态框（Modal）是覆盖在父窗体上的子窗体，使用场景比如：在页面上编辑内容的时候经常需要弹出一个框框，可以编辑字段提交。点删除按钮的时候，需要弹出二次确认框，这种现页面上的框框就是模态框

03

游戏优化系列三：Unity游戏的黑屏问题解决方法

大家好，我叫Jack冯；本人20年硕士毕业于广东工业大学，于2020年6月加入37手游安卓团队；目前主要负责海外游戏发行安卓相关开发。

00

Jquery中dialog属性小记

还是先看例子吧。另外如果要拖动、改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js

03

[android] activity的生命周期

在这些方法里面打印log日志，为了方便查看在filter里面增加一个System.out来过滤

02

浅析UIApplication生命周期的一些delegate方法

前言网上有很多关于程序启动过程和UIApplicationDelegate方法调用顺序的文章。笔者这里不再介绍程序的启动过程和delegate方法的调用过程。而是介绍一下UIApplication会在什么情况下调用UIApplicationDelegate的哪些方法。以及常见的场景下，哪些方法会被调用，苹果为什么会这样做。回顾首先让我们先来回顾下与程序启动过程相关的一些delegate方法的调用时机。 - (BOOL)application:(UIApplication *)application d

03

bootstrap 模态框弹出框

('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

04

【前端词典】滚动穿透问题的解决方案

随着移动端市场的份额越大，需求就越多样化。我们今天讨论的是移动端的滚动穿透问题。上面这段调侃的话可以看出需求中弹窗浮层还是挺常见的，那这个和滚动穿透有什么联系呢？

05

Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。它支持响应式布局，并且在V3版本之后坚持移动设备优先。为什么要使用Bootstrap？在Bootstrap出现之前：命名：重复、复杂、无意义（想个名字费劲）样式：重复、冗余、不规范、不和谐页面：错乱、不规范、不和谐在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。 Bootstrap下载

07

微信充值页面开发总结

前端获取code---把code给后端去获取openID---将openID和订单信息发给后端获取微信支付所需参数（订单号、appid、微信签名等信息）---调起微信支付api---成功回调（失败回调）

01

用vue实现模态框组件

基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实现。组件结构 <tem

00

Window对象

window作为全局变量，代表了脚本正在运行的窗口，将属性与方法暴露给JavaScript。

02

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

04

前端之bootstrap模态框

简介：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 Modal简介 Modal实现弹出表单 Modal实现删除提示框其他用法 Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用 modal.js。或者，正如

05

CSS 下拉菜单与 focus

focus 伪类 :focus 表示被点击、触摸或 tab 选中的元素，笼统地说就是「获得焦点」的元素。

02

AngularDart Material Design 输入顶

Selector: <material-input:not(material-input[multiline])>

04

【送红宝书】JavaScript 测试系列实战（四）：掌握 React Hooks 测试技巧

「为了回馈图雀社区的读者，图雀酱特地挑选了几本书籍送给大家，文末有送书活动详情哦~」

00

做好内容安全检测，和风险说「再见」！（下）

随笔川迹: 一个靠前排的90后具有情怀的技匠,路上正追逐斜杠青年的践行者,人人领读发起人。

01

小程序-云开发-如何对敏感词进行过滤即内容安全的检测(下)

在前面一文小程序-云开发-如何对敏感词进行过滤即内容安全的检测(上)中通过在小程序端请求云函数msgSecCheck1,通过request,request-promise请求微信提供的内容安全接口以及获取access_token,实现了对小程序端输入文本内容安全的检测

01

备忘：base 标签和ShowModalDialog 、showModelessDialog

本文介绍了如何使用Base标签和ShowModalDialog、showModelessDialog方法在网页中弹出对话框。其中，Base标签用于在网页中显示对话框，ShowModalDialog和showModelessDialog方法则用于创建模态和非模态的对话框。这些方法可以用于向用户显示信息、获取用户输入以及执行其他操作。

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。 1、Bootstrap对话框的使用常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstr

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭