网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是基于bootstrap4框架的弹框插件,可以是bootstrap4的弹框更加漂亮,响应式迅速的动态警报/确认对话框和复杂模式窗口。
1. 在html页面加载bootstrap框架和jquery库。
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
2. 在jquery库后加载bootstrap-show-modal.js插件文件。
<script src="src/bootstrap-show-modal.js"></script>
3. 使用JavaScript创建一个带有确认按钮的弹框。
$.Modal.alert({
title: "弹框标题",
body: "弹框内容"
})
4. 使用JavaScript创建基础弹框。
$.Modal.show({
title: "弹框标题",
body: "弹框内容"
})
5. 使用JavaScript创建带有确认和取消按钮的弹框。
$.Modal.confirm({
title: "Confirm Dialog",
body: "Are You Sure",
textTrue: "Okey",
textFalse: "Cancel",
confirmed: function (result) {
if (result) {
// do something
} else {
// do something
}
},
hidden: function () {
// do something
}
})
6. 所有默认选项。
{
// modal title
title: "",
// modal body
body: "",
// modal footer
footer: "",
// additional CSS class(es)
modalClass: "fade",
// additional CSS class(es) for ".modal-dialog"
modalDialogClass: "",
// Bootstrap 4 modal's options
options: null
// called after created
onCreate: null,
// called after disposed
onDispose: null,
// called after confirmed
// $.showConfirm only
onSubmit: function(result, modal){}
}
转载请注明来源:非常好用的bootstrap4 dialog弹框插件
本文永久链接地址:https://www.moyouyouw.cn/code/863.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论