当前位置:首页 > 电脑 > 正文

bootbox.js——基于Bootstrap的模态框

简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框。
不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事件。所以 在使用confirm()对话框时,请记住这一点,因为它不是本地确认对话框的替代。 任何取决于用户选择的代码都必须放在回调函数中。

alert

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

bootbox.alert("Your message here…")

message中可以放html语言,比如:

bootbox.alert("Your message <b>here…</b>")

回调函数:

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

options选项自定义对话框:

bootbox.alert({   size: "small",  title: "Your Title",  message: "Your message here…",   callback: function(){ /* your callback code */ }})

Confirm

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

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

options选项:

bootbox.confirm({   size: "small",  message: "Are you sure?",   callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ }})

Prompt

Confirm是提示用户进行输入操作并确定或者取消的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。
同样,prompt中回调函数也是必须的。

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

options选项:

bootbox.prompt({   size: "small",  title: "What is your name?",   callback: function(result){ /* result = String containing user input if OK clicked or null if Cancel clicked */ }})

注意:prompt在使用options选项时需要title选项,并且不允许使用message选项。

Custom Dialog

一个完全自定义的对话框方法,它只接收一个参数 - options对象。也就是说按ESC键时,这个自定义对话框将不会自动关闭,需要使用onEscape函数手动实现此行为。
options至少要有message选项,这时候将会出现一个不可撤销的对话框,一般用作“loading”界面,如:

bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>' })

options选项参数详解

1、message

类型:String | Element

描述:显示在对话框上的内容

必需:alert | confirm | custom dialogs

2、title

类型:String | Element

描述:为对话框添加标题,默认大小为<h4>

必需:prompts

3、callback

类型:Function

描述:回调函数

alert回调不提供参数,函数体为空则会被忽略,如:

bootbox.alert({ message: "I'm an alert!", callback: function() {} })

confirm和prompt回调必须提供参数result。当为confirm时,result类型为boolean,用来判定是还是否;当为prompt时result将保存用户输入的值。

bootbox.confirm("Are you sure?", function(result) {    // result will be true or false}); bootbox.prompt("What is your name?", function(result) {    if (result === null) {        // Prompt dismissed    } else {        // result has a value    }});

必需:confirm | prompt

4、onEscape

类型:Boolean | Function

描述:允许用户通过点击ESC来关闭对话框,点击ESC这将调用此选项。

默认值 : alert | confirm | prompt : true ; custom dialogs : null

必需:alert | confirm | custom dialogs

5、show

类型:Boolean

描述:是否立即显示对话框

默认值 : null

6、backdrop

类型:Boolean

描述:对话框是否有背景,还可以确定点击背景是否退出模态。

Undefined (null) 显示背景,点击背景不会触发事件

true * 显示背景,点击背景会取消此对话框

false 不显示背景

注意:当此值设置为true时,仅当onEscape设置esc也可以关闭时,对话框才会关闭

默认值 : null

7、closeButton

类型:Boolean

描述:对话框是否显示关闭按钮

默认值 : true

8、animate

类型:Boolean

描述:显示动画效果(需要浏览器支持)

默认值 : true

9、className

类型:String

描述:为对话框增加额外的css文件

默认值 : null

10、 size

类型:String

描述:将Bootstrap模态大小类添属性加到对话框包装器,有效值为'large'和'small',需要Bootstrap 3.1.0以上。

默认值 : null

11、buttons

类型:Object

描述:按钮被定义为JavaScript对象。 定义按钮的最小定义是:

"Your button text": function() {}

你可以设置的其他属性有:

buttonName : {  label: 'Your button text',  className: "some-class",  callback: function() {  }}

其中buttoName应为:

alert           okconfirm         cancel, confirmprompt          cancel, confirm

每个可用的按钮选项都可以被重写,以使用自定义内容(文本或HTML)和CSS样式。 例如:

bootbox.confirm({    message: "This is a confirm with custom button text and color! Do you like it?",    buttons: {        confirm: {            label: 'Yes',            className: 'btn-success'        },        cancel: {            label: 'No',            className: 'btn-danger'        }    },    callback: function (result) {        // ...    }});

您不能重写alert,confirm和prompt对话框的按钮的回调。
默认值 : null


我在一个页面使用了这个插件,引用版本如下:

<script src="//cdn.bootcss.com/bootbox.js/4.4.0/bootbox.min.js"></script>

结果发现弹出的模态对话框语言是英文的OK

按照网上的解决方案,使用

bootbox.setDefaults("locale","zh_CN");

将其语言换成中文

如果你使用的是3.x的版本,则需要设置

bootbox.setLocale("zh_CN");

然而我发现我用任意版本设置后alert仍旧是英文状态的OK……

看了下好像js里就是这样写的,所以需要自己定义下按钮

<script type="text/javascript"> //bootbox.setDefaults("locale","zh_CN");  bootbox.alert({ title:"打开微信扫一扫,一元两元都是爱", size: "small", message:'<img class="img-responsive img-rounded" src="https://www.muruoxi.com/wp-content/uploads/2018/01/20180117134026.png">', buttons:{ ok:{ label:"确定" } } });</script>

附一张图

bootbox.js

bootbox.js


 

本博客资源若无特殊说明,均为和谐版本,无需付费,我不搞软件的会员,也不接受指定的和谐业务。

软件无法下载/安装/其它电脑问题,免费加QQ群(500人):949039296

有问题加上面的群,直接群里问,在线的时候有问必答,私聊一般都不看

想打赏微信扫右边的二维码,不建议超过10元,没指望靠这个养活我

 
文章标题:bootbox.js——基于Bootstrap的模态框
本文作者:慕若曦
发表日期:2018-02-2 09:26 星期五    首发于    暮若夕
本文固定链接: https://www.muruoxi.com/pc/1972.html
 
文章标签:
上一篇: 下一篇:

暂无评论

发表评论

╮( ̄▽ ̄)╭ | (= ̄ω ̄=) | (>﹏<) | Σ( ° △ °|||)︴ | Σ(っ °Д °;)っ | X﹏X | (╯-_-)╯╧╧

小提示:提交评论后刷新本页面即可看到隐藏的文件哦~
十年之约
加载中……