对话框/Tips

bootstrap 4 模态窗口增强jQuery插件

也想出现在这里?联系我们
面包多

bootstrap 4 模态窗口增强jQuery插件-创客云
Simple-bs-dialog.js 是一款 bootstrap 4 模态窗口增强插件。通过该插件,使用 bootstrap4 模态窗口会更加简单方便,功能更强大。
使用方法
在 HTML 文件中引入

  1. <!-- Bootstrap 4 Stylesheet -->
  2. <link rel="stylesheet" href="bootstrap.min.css" />
  3. <!-- simple-bs-dialogStylesheet -->
  4. <link href="./dist/css/simple-bs-dialog.min.css" rel="stylesheet" />
  5. <!-- Bootstrap 4 JavaScript -->
  6. <script src="jquery.min.js"></script>
  7. <script src="bootstrap.min.js"></script>
  8. <!-- simple-bs-dialog JavaScript -->
  9. <script src="./dist/js/simple-bs-dialog.min.js"></script>
也想出现在这里?联系我们
创客主机

初始化插件

也想出现在这里?联系我们
bootstrap 4 模态窗口增强jQuery插件-创客云

创建一个基本的模态窗口

  1. SimpleBsDialog.show({
  2.   title: 'Modal Title',
  3.   html: 'Modal Content Here'
  4. });

带 Loading 的模态窗口

  1. SimpleBsDialog.show({
  2.   title: 'Modal Title',
  3.   spinner: true,
  4.   spinnerIcon: '<span class="spinner-border text-primary" role="status"></span>',
  5.   onShown: function(dialogRef) {
  6.     setTimeout(function() {
  7.       dialogRef.set({
  8.         'spinner': false,
  9.       }).getModalBody().html('Your content goes here...');
  10.       dialogRef.getButtons().prop('disabled', false);
  11.     }, 1000);
  12.   }
  13. });

自定义确定和取消按钮

  1. SimpleBsDialog.show({
  2.   buttons: [{
  3.     id: 'btn-ok',
  4.     label: 'OK',
  5.     cssClass: 'btn-primary',
  6.     action: function(dialogRef) {
  7.       console.log('OK button pressed!');
  8.       dialogRef.close();
  9.     },
  10.   },{
  11.     id: 'btn-cancel',
  12.     label: 'Cancel',
  13.     cssClass: 'btn-warning',
  14.     action: function(dialogRef) {
  15.       console.log('Cancel button pressed!');
  16.       dialogRef.close();
  17.     },
  18.   }]
  19. });

配置参数
所有可用的配置项

  1. SimpleBsDialog.show({
  2.   id: newGuid(),
  3.   width: 500,
  4.   autoWidth: false,
  5.   height: 280,
  6.   autoHeight: false,
  7.   title: '',
  8.   closable: true,
  9.   spinner: false,
  10.   spinnerIcon: '<span class="spinner-border" role="status"></span>',
  11.   closeByBackdrop: true,
  12.   closeByKeyboard: true,
  13.   html: '',
  14.   cssClass: '', // extra CSS class(es)
  15.   buttons: [],
  16. });

API 回调函数
SimpleBsDialog.show({
onShow: function(dialogRef){},
onShown: function(dialogRef){},
onHide: function(dialogRef){},
onHidden: function(dialogRef){}
});
可用方法

  1. open(): Opens the modal. 
  2. close(): Closes the modal. 
  3. get(option): Getter for options.
  4. set(option, value): Setter for a given option.
  5. set(options): Setter for many options. 
  6. getModalBody(): Returns the raw modal body.
  7. getButton(id): Returns a button by id as a jQuery object.
  8. getButtons(): Returns all available buttons as jQuery objects.
  9. SimpleBsDialog.version: Returns the current SimpleBsDialog's version.

Github 网址:https://github.com/wraplr/simple-bs-dialog

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!