网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个简单的JavaScript(jQuery)Bootstrap框架插件,用户无需编写任何HTML代码,可动态创建多功能bootstrap4弹框。支持设置弹窗标题和内容,自动关闭时间、自定义按钮等。可用于提示,用户确认弹框。
1. 在html页面中加载bootstrap4框架和插件文件。
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="/path/to/dist/js/bootstrap4dialog.min.js"></script>
2. 创建一个带标题和内容的简单弹窗。
Bootstrap4Dialog.show({
title: 'Sample Title 1',
message: 'Message text goes here'
});
3. 创建一个类似吐司的提示框,3秒后可自动关闭。
Bootstrap4Dialog.show({
message: 'Toast Message Here',
duration: 5
});
4. 自定义按钮
Bootstrap4Dialog.show({
title: 'Confirm Dialog',
message: 'Are You Sure',
buttons: [{
id: 'btn-cancel',
label: 'Cancel',
cssClass: 'btn btn-light',
action: function(dialog) {
dialog.modal('hide');
}
},
{
id: 'btn-submit',
label: ' Submit',
cssClass: 'btn btn-sm btn-danger',
action: function(dialog) {
alert('fake form submittion..');
dialog.modal('hide');
}
}]
})
5. 支持的类型
Bootstrap4Dialog.TYPE_PRIMARY = "primary";
Bootstrap4Dialog.TYPE_SECONDARY = "secondary";
Bootstrap4Dialog.TYPE_SUCCESS = "success";
Bootstrap4Dialog.TYPE_DANGER = "danger";
Bootstrap4Dialog.TYPE_WARNING = "warning";
Bootstrap4Dialog.TYPE_INFO = "info";
Bootstrap4Dialog.TYPE_LIGHT = "light";
Bootstrap4Dialog.TYPE_DARK = "dark";
Bootstrap4Dialog.show({
type: Bootstrap4Dialog.TYPE_LIGHT
})
6. 设置按钮的大小。选项:
Bootstrap4Dialog.SIZE_SMALL = "modal-sm";
Bootstrap4Dialog.SIZE_MEDIUM = "";
Bootstrap4Dialog.SIZE_LARGE = "modal-lg";
Bootstrap4Dialog.SIZE_EXTRA_LARGE = "modal-xl";
Bootstrap4Dialog.show({
size: Bootstrap4Dialog.SIZE_SMALL
})
7. 是否显示背景。选项:
Bootstrap4Dialog.BACKDROP_YES = "true";
Bootstrap4Dialog.BACKDROP_NO = "";
Bootstrap4Dialog.BACKDROP_STATIC = "static";
Bootstrap4Dialog.show({
backdrop: Bootstrap4Dialog.BACKDROP_NO
})
8. 是否允许窗口“可滚动”。默认值:false。
Bootstrap4Dialog.show({
scrollable: true
})
9. 隐藏后是否自动关闭窗口。默认值:true。
Bootstrap4Dialog.show({
autodestroy: false
})
10. 当窗口关闭并隐藏时触发自定义函数。默认值:true。
Bootstrap4Dialog.show({
open: function() {
// do something
},
close: function() {
// do something
}
})
11. 手动关闭窗口
instance.modal('hide');
转载请注明来源:bootstrap4简单实用的多功能弹框插件
本文永久链接地址:https://www.moyouyouw.cn/code/680.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论