bootstrap插件bootbox参数和自定义弹出框宽度设置

插件官方地址: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即可。

时间: 2024-10-09 04:31:33

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

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

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

js自定义弹出框

js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="text/css" > .layout { width:2000px; height:400px; border:solid 1px red; text-align:center; } </style> <script type="text/javascript&quo

鼠标拖动 自定义弹出框

/*设置自定义弹出框可移动*/jQuery(document).ready( function () { $('.popmodal .popheader').mousedown( function (event) { var isMove = true; var abs_x = event.pageX - $(this).offset().left; var abs_y = event.pageY - $(this).offset().top; $(document).mousemove(fun

Validform自定义提示效果-使用自定义弹出框

$(function(){ $.Tipmsg.r=null; $("#add").Validform({ tiptype:function(msg){ layer.msg(msg); } }); }) Validform自定义提示效果-使用自定义弹出框

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

简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址:https://github.com/jacklam718/react-native-popup-dialog) 具体配置见Git文档~ 二.配置单选框 用的是:react-native-elements(Git地址:https://react-native-training.github.io/

BootStrap学习笔记JS插件(一)--模态弹出框

一.弹出框基础 <div class="modal show"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss=&quo

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap

自定义弹出框效果

对网站而言,弹出框是比较常见的.或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等. 但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调,且不同浏览器有不同的默认样式设置. 所以在日常工作中,给网站做一个自定义的弹出框十分必要.特别是富交互的网站 一.提示框 html部分: 1 <!--修改弹窗--> 2 <div class="pop-alert" id="pop" style

unity 之 自定义弹出框

一.弹出框的搭建: 布局如图:Message为整个父物体,并且添加UiMessage代码.panel为遮罩. MessageBox为整个提示框,Panel为标题,ok为确定按钮,cancel为取消按钮,retry为重试按钮,Text为提示框的文字. 注意大小写,后面代码会根据名称进行获取对应组建. 效果如下: 二.MessageBox代码: 要说明的都在代码中注释了.仿照Windows的提示框功能,如果功能不足可自行添加.例如关闭按钮.显示图标等. using System; public en