bootbox是boostrap集成的弹窗,基本能完成后台系统的需求,下面是一些使用方法

1.bootbox.alert

bootbox.alert使用方法主要有三种

  直接传内容

bootbox.alert('弹窗信息')

 传对象

/*
@ message 弹窗的信息,必须要有的属性
@ callback 点击确定的回调函数
*/ bootbox.alert({
message:'弹窗信息',
callback:function(){
console.log('点击了确定');
}
})

效果如下

2.bootbox.confirm

/*
@ message 弹窗的信息,必须要有的属性
@ callback 点击弹窗按钮的回调函数,确定传的value为true,取消为fasle,
@ buttons 按钮的信息
*/
bootbox.confirm({
message:'弹窗信息',
callback:function (value) {
console.log(value)
}
})
bootbox.confirm({
message:'弹窗信息',
callback:function (value) {
console.log(value)
},
buttons:{
confirm:{
confirm:'确认按钮',
className:'btn-primary'
},
cancel:{
confirm:'取消按钮',
className:'btn-default'
}
}
})

3.bootbox.prompt

效果过于逗B,不过多讨论

bootbox.prompt({
title: '弹窗标题',
callback: function(value) {
console.log('你输入的内容为' + value)
}
})

4.bootbox.dialog

以上三个方法最后都是通过转换参数调用dialog的(转换的方法写的挺好的,有心情的可以看看)

bootbox.dialog({
message: "弹窗内容",
title: "弹窗标题",
buttons: {
Cancel: {
label: "取消",
className: "btn-default",
callback: function () {
console.log("点击了取消");
}
}
, OK: {
label: "OK",
className: "btn-primary",
callback: function () {
console.log("点击了确定");
}
}
}
});

结束语:

  boostrap的这套弹窗,简单实现了基本的交互,但是遇到复杂的交互的话(点击按钮前做些事情,失败不关闭弹窗,点击取消和弹窗右上角的x是调用不同的事件....),还是自己写一套吧~

bootbox api的更多相关文章

  1. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  2. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  3. Bootstrap篇:弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  4. kendoWindow 与 bootbox 冲突,显示层次问题

    今天在使用bootbox做弹出提示遇到些麻烦,由于使用kendoWindow先弹出数据输入窗口, 然后在检核输入时,又用bootbox做为提示窗口,这下悲剧了,后弹出的bootbox窗口总是在kend ...

  5. bootbox上的浮层弹出如何加上datepicker

    bootbox和datepicker都是插件,我想要做的需求大致长这样: 我希望使用bootbox弹出的对话框中能弹出一个截止时间的选择框,这个选择框使用datepicker来做. 看了下这个帖子: ...

  6. arcgis api for javascript 学习(七) 调用发布地图信息,并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  7. arcgis api for javascript 学习(三) 调用发布地图信息,并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  8. 干货来袭-整套完整安全的API接口解决方案

    在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优 在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...

  9. 12306官方火车票Api接口

    2017,现在已进入春运期间,真的是一票难求,深有体会.各种购票抢票软件应运而生,也有购买加速包提高抢票几率,可以理解为变相的黄牛.对于技术人员,虽然写一个抢票软件还是比较难的,但是还是简单看看123 ...

随机推荐

  1. 警告:‘xxxx’ 将随后被初始化

    关于编译报警告.本次是接手一个新手的代码,总共不到1K行的代码.两个类.编译的时候报的警告,本来也不打算管理这个事情的.要求也不会有那么严格.但上午看完代码后,觉得毕竟是新手写的代码,还是有很多需要修 ...

  2. vim下设置tab

    前言:大多数情况下tab键的宽度设置为4个空格,这个可以根据自己 的代码风格进行替换,然而当你提交不同的语言的代码的时候python 和c的时候就有区别了.c的话一般tab键做缩进,而python提交 ...

  3. Sitemesh3的使用及配置

    1 . Sitemesh 3 简介 Sitemesh 是一个网页布局和修饰的框架,基于 Servlet 中的 Filter,类似于 ASP.NET 中的‘母版页’技术.参考:百度百科,相关类似技术:A ...

  4. cglib源码学习交流

    背景 前段时间在工作中,包括一些代码阅读过程中,spring aop经常性的会看到cglib中的相关内容,包括BeanCopier,BulkBean,Enancher等内容,以前虽大致知道一些内容,原 ...

  5. bootstrap base css 基本css

    Headings All HTML headings, <h1> through <h6> are available. h1. Heading 1 h2. Heading 2 ...

  6. WTL---WxWidget---MFC 何去何从

    C++程序员打交道最多的就是MFC了,这个我不想多说,说来都是泪(C#年年更新,C++十年才出了一个featurePack还不是很好用) 现在另外两支队伍越来越庞大(所谓穷则思变,呵呵),一是WTL, ...

  7. Codeforces Round #312 (Div. 2)

    好吧,再一次被水题虐了. A. Lala Land and Apple Trees 敲码小技巧:故意添加两个苹果树(-1000000000, 0)和(1000000000, 0)(前者是位置,后者是价 ...

  8. Office 365 - SharePoint 2013 Online之加入App开发工具Napa

    1.新建一个站点集,模板选择开发者模板.例如以下图: 2.确定以后,须要稍等一会儿; 3.点击站点内容,加入app,例如以下图: 4.进入SharePoint Store.选择Napa.例如以下图: ...

  9. Android新增API之AudioEffect中文API与应用实例

    在Android2.3中增加了对音频混响的支持,这些API包含在android.media.audiofx包中. 一.概述 AudioEffect是android audio framework(an ...

  10. BZOJ 3685: 普通van Emde Boas树( 线段树 )

    建颗权值线段树就行了...连离散化都不用... 没加读入优化就TLE, 加了就A掉了...而且还快了接近1/4.... ---------------------------------------- ...