Bootstrap 5 Modals - bootstrap-modbox
栏目分类:模态 / 弹出窗口   发布日期:2021-10-19   浏览次数:

Modbox 是围绕 Bootstrap 5 模态组件的原生 JavaScript 包装器,可帮助您使用 Bootstrap 样式创建自定义弹出窗口。

特征:

  • 信息/成功/危险/错误警报。

  • 确认对话框。

  • 提示弹出窗口。

  • 支持 Promise API。

  • 异步内容加载。

使用:

1. 安装 Modbox 并将其导入到您的 Bootstrap 5 项目中。

# NPM
$ npm i bootstrap-modbox
// 从 CDN
<script src="/uploads/allimg/211019/10332K2P-0.jpg"></script>
 
// 从本地
<script src="./dist/bootstrap-modbox.min.js"></script>
 
// 作为一个模块
import modbox from './dist/bootstrap-modbox.esm.min.js';

2. 创建警报对话框。

modbox.alert('内容');
 

modbox.alert({
  body: '内容'
});
 

modbox.alert({
  body: '内容'
})
.then(() => console.log('Alert resolved'));
 
// variants
modbox.info({
  // 选项
});
 
modbox.success({
  // 选项
});
 
modbox.danger({
  // 选项
});
 
modbox.error({
  // 选项
});

3. 创建一个确认对话框。

modbox.confirm({
  body: '内容',
  okButton: {
    label: '确定',
    size: 'lg'
  },
  closeButton: {
    label: '取消',
    size: 'sm'
  }
})
.then(() => console.log('okButton clicked'))
.catch(() => console.log('okButton not clicked'));

4. 创建提示对话框。

modbox.prompt({
  body: '内容',
  input: {
    required: true,
    pattern: /\d+/, // 输入验证
  }
})
.then(response => console.log(response));

5. 使用modbox方法创建自定义弹出框。

const myModal = new modbox({
  id: 'myModal',
  style: 'primary',
  title: '标题',
  body: '内容',
  justifyButtons: 'between',
  destroyOnClose: true,
  buttons: [
    { label: '按键 1', style: 'primary' },
    '<button type="button" class="btn btn-dark" data-bs-dismiss="modal">按键 2</button>'
  ],
  events: {
    shown: () => console.log('modal shown')
  }
});
myModal.addButton({ label: '按键 3', style: 'danger' }, true);
myModal.addEvent('hidden', () => console.log('modal hidden'));
myModal.show();

6. 完整选项。

// 自定义图标类
icon: null,
 
// 基于 Bootstrap 实用程序类的颜色
style: 'white',
 
// 标题文本颜色
titleStyle: null,
 
// 对话框标题
title: 'Information',
 
// 对话框内容
body: '',
 
// sm, lg, ...
size: null,
 
// 将弹出框居中
center: false,
 
// 启用淡入淡出动画
fade: true,
 
// 在页面加载时显示弹出框
show: false,
 
// 设置传递给显示和显示事件回调函数的事件对象上的 relatedTarget 属性。
// 可以通过在调用 .show() 方法时传入一个元素来覆盖。
relatedTarget: undefined,
 
// 可滚动
scrollable: true,
 
// 在关闭时销毁弹出框
destroyOnClose: false,
 
// 将默认按钮添加到弹出框
defaultButton: true,
 
// 交换按钮顺序
swapButtonOrder: false,
 
// start, end, center, between, around, evenly
justifyButtons: null,
 
// events
events: {
  show: null,
  shown: null,
  hide: null,
  hidden: null,
  hidePrevented: null,
},
 
// 只适用于构造器模态
buttons: [],
 
// 仅适用于类模态,并覆盖 modbox.defaultButtonOptions 
okButton: {
  label: 'OK',
  style: 'primary'
},
closeButton: {
  label: 'Cancel',
  style: 'secondary'
},
 
// 仅适用于 .prompt() 类 modal 
input: {
  type: 'text',
  class: '',
  value: '',
  title: null,
  placeholder: null,
  autocomplete: 'off',
  minlength: null,
  maxlength: null,
  pattern: null,
  required: false
},

7. 方法和属性。

// 添加一个新按钮
// addButton(options, appendStart)
instance.addButton({
  label: 'New Button'
});
 
// 发送事件
// 添加事件(事件,函数)
instance.addEvent('shown', () => console.log('shown'));
 
// 显示弹出框
instance.show(relatedTarget);
 
//隐藏弹出框
instance.hide();
 
// 切换弹出框
instance.toggle();
 
// 处理弹出框
instance.dispose();
 
//销毁实例
instance.destroy();
 
// 重新定位弹出框
instance.handleUpdate();

官方网站:https://github.com/erobertson42/bootstrap-modbox

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库