网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
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();
转载请注明来源:jquery+bootstrap多语言弹框插件(支持4种弹框模式)
本文永久链接地址:https://www.moyouyouw.cn/code/829.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论