bootstrap 4 模态窗口增强jQuery插件

PetitQ 对话框/Tips 2019-11-04 1.85K 0 0

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

```

```

<link rel="stylesheet" href="bootstrap.min.css" />

```

```

<link href="./dist/css/simple-bs-dialog.min.css" rel="stylesheet" />

```

```
```
<script src="jquery.min.js"></script>
```

<script src="bootstrap.min.js"></script>

```

```

<script src="./dist/js/simple-bs-dialog.min.js"></script>

也想出现在这里？联系我们吧

初始化插件
创建一个基本的模态窗口

```
SimpleBsDialog.show({
```
```
  title: 'Modal Title',
```
```
  html: 'Modal Content Here'
```
```
});
```

带 Loading 的模态窗口

```
SimpleBsDialog.show({
```
```
  title: 'Modal Title',
```
```
  spinner: true,
```

  spinnerIcon: '<span class="spinner-border text-primary" role="status"></span>',

```
  onShown: function(dialogRef) {
```
```
    setTimeout(function() {
```
```
      dialogRef.set({
```
```
        'spinner': false,
```

      }).getModalBody().html('Your content goes here...');

      dialogRef.getButtons().prop('disabled', false);

```
    }, 1000);
```
```
  }
```
```
});
```

自定义确定和取消按钮

```
SimpleBsDialog.show({
```
```
  buttons: [{
```
```
    id: 'btn-ok',
```
```
    label: 'OK',
```
```
    cssClass: 'btn-primary',
```
```
    action: function(dialogRef) {
```

      console.log('OK button pressed!');

```
      dialogRef.close();
```
```
    },
```
```
  },{
```
```
    id: 'btn-cancel',
```
```
    label: 'Cancel',
```
```
    cssClass: 'btn-warning',
```
```
    action: function(dialogRef) {
```

      console.log('Cancel button pressed!');

```
      dialogRef.close();
```
```
    },
```
```
  }]
```
```
});
```

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

```
SimpleBsDialog.show({
```
```
  id: newGuid(),
```
```
  width: 500,
```
```
  autoWidth: false,
```
```
  height: 280,
```
```
  autoHeight: false,
```
```
  title: '',
```
```
  closable: true,
```
```
  spinner: false,
```

  spinnerIcon: '<span class="spinner-border" role="status"></span>',

```
  closeByBackdrop: true,
```
```
  closeByKeyboard: true,
```
```
  html: '',
```
```
  cssClass: '', // extra CSS class(es)
```
```
  buttons: [],
```
```
});
```

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

```
open(): Opens the modal. 
```
```
close(): Closes the modal. 
```
```
get(option): Getter for options.
```

set(option, value): Setter for a given option.

```
set(options): Setter for many options. 
```

getModalBody(): Returns the raw modal body.

getButton(id): Returns a button by id as a jQuery object.

getButtons(): Returns all available buttons as jQuery objects.

SimpleBsDialog.version: Returns the current SimpleBsDialog's version.

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

bootstrap 4 模态窗口增强 jQuery 插件

已有 462 人购买

永久更新：
演示数据：
提取码：h87h

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

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

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

对话框/Tips

bootstrap 4 模态窗口增强jQuery插件

bootstrap 4 模态窗口增强 jQuery 插件

相关文章

Toolbar - 实用Query提示工具栏插件

iziModal - 时尚炫酷的jQuery模态窗口插件

Google Material Design 风格模态窗口插件

发表回复取消回复

热销模板

对话框/Tips

bootstrap 4 模态窗口增强 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复