jquery+bootstrap多语言弹框插件（支持4种弹框模式）

演示  website 下载

插件介绍

Bootbox是一款轻量级的jQuery插件，用于创建灵活的Bootstrap框架弹框，支持bootstrap3，4框架。有4种弹框模式，每个方法都可以使用各种参数来自定义标签和指定默认值。

bootbox.alert(message, callback)
bootbox.prompt(message, callback)
bootbox.confirm(message, callback)
bootbox.dialog({message})

使用方法

1. 在html页面中加载 jQuery库和Bootbox.js插件文件.

<script src="jquery.min.js"></script> 
<script src="bootbox.min.js"></script> 

2. 加载bootstrap框架。 

<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script> 

3. 创建提醒弹出框。

bootbox.alert("Alert!");
// or
bootbox.alert({
  size: "small",
  title: "Dialog Title",
  message: "Your message here…",
  callback: function(){}
})

4.创建一个确认弹出框。

bootbox.confirm("Are you sure?", function(result){ 
  alert('confirmed') 
})
// or
bootbox.confirm({
  size: "small",
  message: "Are you sure?",
  callback: function(result){ 
    alert('confirmed') 
  }
})

5. 创建一个提示弹出框。

bootbox.prompt("你的姓名?", function(result){ 
  // do something
})
// or
bootbox.prompt({
  value: '', // initial value
  inputType: 'input', // any form elements
  inputOptions: {},
  min: null, // min value
  max: null, // max value
  step: null, // step size
  maxlength: null, // max length
  pattern: '', // require the input value to follow a specific format
  placeholder: '',
  required: true, // if is required
  multiple: false, // allows users to select more than one option when using the select input type
  size: "small",
  title: "What is your name?",
  callback: function(result){ 
    // result = String containing user input if OK clicked or null if Cancel clicked
  }
})

6. 创建自定义弹出框。

bootbox.dialog({
  message: 'HTML content here'
})

7. 全局选项默认值。

bootbox.dialog({
  // dialog message
  message: 'HTML content here',

  // title
  title: 'dialog title',

  // shows the dialog immediately
  show: true,

  // default language
  locale: 'en',

  // dialog container
  container: 'body',

  // default value (used by the prompt helper)
  value: '',

  // default input type (used by the prompt helper)
  inputType: 'text',

  // enables backdrop or not
  backdrop: null,

  // shows close button
  closeButton: true,

  // enables animations or not
  animate: true,

  // extra CSS class
  className: null,

  // dialog size
  size: 'small',

  // flips the order in which the buttons are rendered, from cancel/confirm to confirm/cancel
  swapButtonOrder: false,

  // adds the the modal-dialog-centered to the doalog
  centerVertical: false,

  // Append "multiple" property to the select when using the "prompt" helper
  multiple: false,

  // Automatically scroll modal content when height exceeds viewport height
  scrollable: false

  // dismisses the dialog by hitting ESC
  onEscape: true,

  // custom action buttons
  buttons: {},

  // callback
  callback: function(){}
  
})

8. 多语言。

• ar  Arabic  

• az  Azerbaijani

• bg_BG Bulgarian 

• br  Portuguese - Brazil

• cs  Czech 

• da  Danish

• de  German  

• el  Greek

• en  English 

• es  Spanish / Español

• et  Estonian  

• eu  Basque

• fa  Farsi / Persian 

• fi  Finnish

• fr  French / Français 

• he  Hebrew

• hr  Croatian  

• hu  Hungarian

• id  Indonesian  

• it  Italian

• ja  Japanese  

• ka Georgian

• ko  Korean

• lt  Lithuanian  

• lv  Latvian

• nl  Dutch 

• no  Norwegian

• pl  Polish  

• pt  Portuguese

• ru  Russian 

• sk  Slovak

• sl  Slovenian 

• sq  Albanian

• sv  Swedish 

• sw Swahili

• ta Tamil

• th  Thai

• tr  Turkish 

• uk  Ukrainian

• zh_CN Chinese  

• zh_TW Chinese  

bootbox.dialog({
  locale: 'en'
})

9.确定弹出框是否可重用。默认值：false。

bootbox.dialog({
  // whether or not to destroy the modal on hide
  reusable: false
})

10. API方法。

// sets options
bootbox.setDefaults({
  // options here
});

// sets local
bootbox.setLocale('en');

// adds local
bootbox.addLocale(String name, object values);

// removes local
bootbox.removeLocale(String name);

// hides all dialog boxes
bootbox.hideAll();