插件官方地址:http://bootboxjs.com/

alert:

1
bootbox.alert("Hello world!"function() {});

dialog:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
bootbox.dialog({
  // dialog的内容
  message: "I am a custom dialog",
   
  // dialog的标题
  title: "Custom title",
   
  // 退出dialog时的回调函数,包括用户使用ESC键及点击关闭
  onEscape: function() {},
   
  // 是否显示此dialog,默认true
  show: true,
   
  // 是否显示body的遮罩,默认true
  backdrop: true,
   
  // 是否显示关闭按钮,默认true
  closeButton: true,
   
  // 是否动画弹出dialog,IE10以下版本不支持
  animate: true,
   
  // dialog的类名
  className: "my-modal",
   
  // dialog底端按钮配置
  buttons: {
     
    // 其中一个按钮配置
    success: {   
      // 按钮显示的名称
      label: "Success!",
       
      // 按钮的类名
      className: "btn-success",
       
      // 点击按钮时的回调函数
      callback: function() {}
    },
     
    // 另一个按钮配置
    "Danger!": {
      className: "btn-danger",
      callback: function() {}
    }
  }
});

默认的modal是固定宽度的,bootbox也不例外,那么如何让弹出框能自定义宽度呢?我们可以利用上面提到的dialog的className,定义一个class,然后对class设置width即可。

bootstrap插件bootbox参数和自定义弹出框宽度设置的更多相关文章

  1. bootstrap插件(对话框)bootbox参数和自定义弹出框宽度设置

    参考:https://hisune.com/post/view/17/bootstrap-plugin-bootbox-and-custom-width-dialog 官网:http://bootbo ...

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

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

  3. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  4. android自定义弹出框样式实现

    前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...

  5. react native仿微信性别选择-自定义弹出框

    简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...

  6. .NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

  7. jquery实现自定义弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Bootstrap方法为页面添加一个弹出框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. unity 之 自定义弹出框

    一.弹出框的搭建: 布局如图:Message为整个父物体,并且添加UiMessage代码.panel为遮罩. MessageBox为整个提示框,Panel为标题,ok为确定按钮,cancel为取消按钮 ...

随机推荐

  1. bzoj 1266 [AHOI2006] 上学路线 route 题解

    转载请注明:http://blog.csdn.net/jiangshibiao/article/details/23989499 [原题] 1266: [AHOI2006]上学路线route Time ...

  2. javascript返回顶端源代码

    <div style="display:none" id="goTopBtn"><img src="http://www.unity ...

  3. Android系统之路(初识MTK) ------ OTA打包ROM安装系统img等到ZIP

    在做OTA升级包的时候,我编译了好多次都没过.老是IO异常.刚開始以为是我 make 的错误.后来多次检查 Error 发现是我的配置信息写错了,与驱动project师一起检查源代码, 改动配置信息后 ...

  4. ps图片怎样实现渐变

    首先我先将一副图片展示给大家: 我所做的效果是想把图片做成渐变.而不改变中间图片的颜色效果. 接下来我来说明一下我的所做思路. 首先将图片中间部分选择出来.然后复制成一个图层. 详细操作是用魔棒进行反 ...

  5. Codeforces Round #324 (Div. 2)D. Dima and Lisa 数学(素数)

                                                     D. Dima and Lisa Dima loves representing an odd num ...

  6. 【转】Material Design 折叠效果 Toolbar CollapsingToolbarLayout AppBarLayout

    我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...

  7. python-----tuple用法

    有一种有序列表叫元组:tuple.tuple和list非常类似,但是tuple一旦初始化就不能修改,比如同样是列出同学的名字: >>> classmates = ('Michael' ...

  8. bzoj3561

    3561: DZY Loves Math VI Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 240  Solved: 163[Submit][Sta ...

  9. bootstrap的modal弹窗,在多层窗口关闭时只会关闭自窗口,不再关闭父窗口

    bootstrap多层modal弹窗时.当子窗口关闭时,所有父窗口一起关闭. 原因是bootstrap在窗口关闭事件委托时,委托给所有窗口. 如源码: this.$element.on('click. ...

  10. P3174 [HAOI2009]毛毛虫(树形dp)

    P3174 [HAOI2009]毛毛虫 题目描述 对于一棵树,我们可以将某条链和与该链相连的边抽出来,看上去就象成一个毛毛虫,点数越多,毛毛虫就越大.例如下图左边的树(图 1 )抽出一部分就变成了右边 ...