帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-12-01 网页特效 评论

插件介绍

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();
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言