如何使用bootbox

article/2025/10/5 7:27:50

1.背景介绍

在JS任务6-10做萝卜多后台中我们会使用到模态框,当时我在做这个任务的时候是使用了AngularJS的ui-bootstrap中的模态框,但是使用起来真的真的很繁琐!直到后来接触到bootbox,发现原来写模态框可以如此的简单。

Bootbox.js是一个小型的JavaScript库,基于 Twitter 的 Bootstrap 开发。它允许你创建使用编程对话框。可以快速定制,创建自己所需的模态框,可以方便的更改它的样式。

Bootbox不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事件。所以 在使用confirm()对话框时,请记住这一点,因为它不是本地确认对话框的替代。 任何取决于用户选择的代码都必须放在回调函数中。


2.知识剖析

该库提供了模拟原生JavaScript的alert警告,confirm确认、prompt提示这三个对话框,另外Bootbox还有dialog自定义对话框。它们每个可以采取各种参数来定制标签和指定默认值,它们最基本用法如下:

alert是只有单个按钮的对话框,按ESC键或单击关闭按钮可关闭对话框。

bootbox.alert("Your message here…", function(){ /* your callback code */ }) 
  • 1

Confirm是具有确定和取消按钮的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。 
需要注意的是,使用confirm时回调函数是必须的。

bootbox.confirm("Are you sure?", function(result){ /* your callback code */ })
  • 1

prompt 是提示用户进行输入操作并确定或者取消的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。 同样,prompt中回调函数也是必须的。 
注意:prompt在使用options选项时需要title选项,并且不允许使用message选项。

bootbox.prompt("What is your name?", function(result){ /* your callback code */ }) 
  • 1

dialog 一个完全自定义的对话框方法,它只接收一个参数 options 对象。也就是说按ESC键时,这个自定义对话框将不会自动关闭,需要使用onEscape函数手动实现此行为。

bootbox.dialog(options)
  • 1

options至少要有message选项。

3.常见问题

使用Bootbox需要注意的地方有哪些?


4.解决方案

首先Bootbox引入的版本要正确,bootbox的所有版本都是在Bootstrap和jQuery的基础之上的,因此bootstrap,jQuery和Bootbox的版本要对应 

还有需要注意脚本引用的顺序:

  • jQuery
  • Bootstrap
  • Bootbox

例如: 

5.编码实战

demo


6.扩展思考

模态框和非模态框有什么区别? 
模态对话框:就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭。 
非模态对话框:当被打开时,用户既可选择和该对话框进行交互,也可以选择同应用程序的其他窗口交互。


7.参考文献

参考文献: 
Bootbox.js 
bootbox.js官方文档中文版


8.更多讨论

问题1:那个自定义按钮的名字随便起吗? 
答:名字可以随便取的。

问题2:自定义按钮的名字是不是必须放在dialig里? 
答:不是的,alert、comfirm、prompt和dialog都是可以自定义按钮名字的,方式参考上面的demo。

问题3:提示框可以嵌套么? 
答:可以。


http://chatgpt.dhexx.cn/article/Tokjde4u.shtml

相关文章

漂亮的弹出框,javascript库bootbox介绍

传统的javascript的警告框、确认框、提示框&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>弹出框</title> </head> <body> <button onclick"f1()">…

BootBox使用

最近公司的系统前端页面全面优化&#xff0c;代号UI/UX。我在优化过程中经常需要使用确认框&#xff0c;但是确认框使用window的话&#xff0c;太难看。于是想做一个非常美观的确认框。 由于系统引用了bootstrap&#xff0c;首先想到的是查看bootstrap中有没有好看的确认框&…

如何使用Bootbox?

大家好&#xff0c;我是IT修真院深圳分院第06期学员&#xff0c;一枚正直善良的web程序员。 今天给大家分享一下&#xff0c;修真院官网 JS-06任务中可能会使用到的知识点&#xff1a; 1.背景介绍 在JS任务6-10做萝卜多后台中我们会使用到模态框&#xff0c;当时我在做这个任…

bootbox的使用

这里是修真院前端小课堂&#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能&#xff0c;本篇分享的是&#xff1a; 【bootbox的使用 】 1.背景介绍 Bootbox.js是一…

c语言如何用argv输入参数,C语言中参数向量argv问题

跃然一笑 楼上蓝皮鼠基本上都回答了&#xff0c;我就再啰嗦几句补充一点东西吧;-)这问题其实挺有趣的&#xff0c;对于argv来说&#xff0c;既然定义成char*argv[]那不就是说明argv是一个指向字符串的指针数组&#xff0c;怎么也能左值操作&#xff1f;我们知道数组名其实就是一…

python sys.argv

sys.argv 是获取运行python文件时的命令行参数&#xff0c;且以list形式存储参数。 这里主要介绍常见的几种用法&#xff1a; 1. sys.argv[0] 输出py文件本身的路径或名称 test.py 文件里的代码如下&#xff1a; import sysasys.argv[0] print(a)运行test.py文件的结果如…

命令行参数argv

1.命令行参数argv 。本质是个指针&#xff0c;或者说数组&#xff0c;存储需要输入的参数&#xff0c;通俗来说&#xff0c;就是input()的功能。在python中要是用的话&#xff0c;需要import sys。如果是在pycharm中使用&#xff0c;将参数在下图中的位置填入&#xff0c;以空格…

g++ 编译过程体会与命令行参数argc,argv[]详解

argc, *argv[] 参数介绍 main(int argc,char *argv[ ]) argc为整数, 代表参数的个数。 argv为指针数组&#xff0c;里面的元素个数是 argc 个&#xff0c;&#xff08;可理解为&#xff1a;char **argv or: char *argv[] or: char argv[][] &#xff09;。 注&#xff1a;mai…

C语言中函数main的参数argc和argv是什么

在 Xcode 中新建一个 macOS 平台 Command Line Tool&#xff0c;使用 C 语言&#xff0c;会发现 main 带了两个参数&#xff1a;argc和argv。如下&#xff1a; argc被程序唤起的命令行参数的数量&#xff0c;用于统计参数数量。这里会导致你有一个误区&#xff0c;在下面argv[…

李宏毅线性代数笔记6:矩阵的计算

1 矩阵的几个概念 1.1 特殊矩阵 1.1.1 数量矩阵 主对角线上元素是同一个数&#xff0c;其余元素全为0的n级矩阵 1.1.2 对角矩阵&#xff08;diagonal matrix&#xff09; 主对角线元素之外全为0的方阵 记作diag{d1,d2,……dn} 1.1.3 基本矩阵 只有一个元素是1&#xff…

二、线性代数

6 特殊类型的矩阵和向量 对角矩阵 对角矩阵&#xff08;diagonal matrix&#xff09;只在主对角线上含有非零元素&#xff0c;其他位置都是零。形式上&#xff0c;矩阵 D D D 是对角矩阵&#xff0c;当且仅当对于所有的 i ≠ j , D i , j 0 i\ne j, \ D_{i,j}0 i​j, Di…

边缘计算与雾计算的区别

雾计算是对MEC的扩展&#xff0c;扩展到了终端侧&#xff0c;包括计算、存储、存储、控制功能。区别如下&#xff1a; 1.MEC使用的资源是网络边缘的设备&#xff0c;而雾计算还要使用终端设备。 2.雾计算是使得云到物的计算无缝连续衔接。 3.雾计算为垂直行业和应用除提供电信业…

雾计算、边缘计算区别和联系

01 从计算方式上边来说的话&#xff0c;雾计算的层次性稍微强一点&#xff0c;并且架构方面比较平坦&#xff0c;这样下来的话整个计算的平稳性就比较好一点。 02 对于边缘计算来说的话&#xff0c;边缘计算在进行计算的时候是不会对网络产生依赖的&#xff0c;也就是说边缘计算…

雾计算机和云计算机哪个好,怎么理解云计算和雾计算还有边缘计算

此外&#xff0c;《数据时代 2025》还预测&#xff0c;2025 年数据量产生的大主体将由消费者转移到企业&#xff0c;届时企业产生的数据量将占到数据总量的 60%。企业领导者将可以从这些海量数据信息和其价值中获得新的商业机遇&#xff0c;但同时也需要对收集、使用和存储数据…

雾计算-思科白皮书 原文+翻译 | 带你全面官方解读雾计算

前言 预感近阶段雾计算会被再次炒起&#xff0c;众所周知雾计算的概念是思科提出来的&#xff0c;于是找来思科白皮书&#xff0c;却是英文版&#xff0c;闲来无事借google翻译将PDF翻译并排版&#xff0c;方便更多的人认识原汁原味的雾计算。 雾计算和物联网&#xff1a;将云…

[Spark基础]--雾计算

wiki解释 雾计算&#xff08;英语&#xff1a;Fog Computing&#xff09;或雾联网&#xff08;fog networking&#xff0c;或fogging&#xff09;&#xff0c;是使用最终用户终端设备或连接最终用户设备的边缘设备&#xff0c;以分布式协作架构进行数据存储&#xff08;相较于将…

AI之边缘计算、雾计算云计算技术分析

边缘计算产生背景&#xff1a; 随着移动智能设备的普及以及5G等无线通信技术的发展,涌现出许多具有低延迟要求的计算密集型应用,如在线沉浸式游戏、增强现实和视频流分析等. 由于传统的云计算无法满足这些应用对低延迟的需求,研究者提出了一种新型的计算模式,称为边缘计算. 边…

第三章-云计算边缘计算雾计算

【前言】随着万物互联时代的到来&#xff0c;网络边缘设备产生的数据量快速增加&#xff0c;带来了更高的数据传输带宽需求。于此同时&#xff0c;新型应用也对数据处理的实时性提出了更高要求&#xff0c;传统云计算模型已经无法有效应对&#xff0c;边缘计算、雾计算应用而生…

云计算、雾计算、边缘计算、移动边缘计算和自动驾驶的关系

什么是云计算呢&#xff1f; 简单来说&#xff0c;云计算就是将很多计算机资源和服务集中起来&#xff0c;人们只要接入互联网&#xff0c;将能很轻易、方便的访问各种基于云的应用信息&#xff0c;省去了安装和维护的繁琐操作。 当然&#xff0c;个人和企业也能使用云计算中心…

【笔记】雾计算中移动应用的优先级约束任务调度

目录 前置 摘要 介绍 模型 应用模型 计算和通信模型 能耗模型 问题定义 NP难 预功率分配算法 能量约束调度 算法1&#xff1a;具有启发式H的能量约束列表调度&#xff08;ECLS-H&#xff09; 时间约束调度 算法2&#xff1a;具有启发式H的时间约束列表调度&#…