Make use of Bootstrap's 4 Modal in a more friendly way.
SimpleBsDialog的全部功能。
Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a title to display.
Most options can be set via init options or property setters.
| Option | Type | Default value | Description |
|---|---|---|---|
| width | String or Integer | 500 |
The dialog's width in pixels or percent. Examples:
SimpleBsDialog.show({
width: '900px',
});
SimpleBsDialog.show({
width: '70%',
});
SimpleBsDialog.show({
width: '600',
});
|
| autoWidth | Boolean | false |
Enables resizing the dialog when the document is resized. It applies only when the 'width' value is set in percent.
SimpleBsDialog.show({
width: '80%',
autoWidth: true,
});
|
| height | String or Integer | 280 |
The dialog's height in pixels or percent. Examples:
SimpleBsDialog.show({
height: '300px',
});
SimpleBsDialog.show({
height: '60%',
});
|
| autoHeight | Boolean | false |
Enables resizing the dialog when the document is resized. It applies only when the 'height' value is set in percent.
SimpleBsDialog.show({
height: '60%',
autoHeight: true,
});
|
| title | String | The dialog's title. | |
| closable | Boolean | true | Show|hide the close button at the top right corner. |
| spinner | Boolean | false | Show|hide the spinner icon. |
| spinnerIcon | String |
|
Set the spinner's icon. |
| closeByBackdrop | Boolean | true | When it's true, you can close it by clicking outside the dialog. |
| closeByKeyboard | Boolean | true | When it's true, you can close it by pressing the ESC key. |
| html | String | The dialog's content. | |
| cssClass | String | Additional css classes that will be added to your dialog. | |
| buttons | Array |
Example:
SimpleBsDialog.show({
buttons: [{
id: 'btn-ok',
label: 'OK',
cssClass: 'btn-primary',
action: function(dialogRef) {
dialogRef.close();
},
},
],
});
id: optional, otherwise a random id will be generated.label: optional, the button's title. cssClass: optional, additional css class to be added to the button. action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function. |
|
| onShow | function | If provided, it will be invoked when the dialog is popping up. | |
| onShown | function | If provided, it will be invoked when the dialog is popped up. | |
| onHide | function | If provided, it will be invoked when the dialog is popping down. | |
| onHidden | function | If provided, it will be invoked when the dialog is popped down. |
| Method | Description |
|---|---|
| open() | Opens the dialog. Usage: dialogInstance.open(). |
| close() | Closes the dialog. Usage: dialogInstance.close(). |
| get(option) |
Getter for options. You can get the following options: width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon |
| set(option, value) |
Setter for a given option. You can set the following options: width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon |
| set(options) |
Setter for many options. You can set the following options: width, autoWidth, height, autoHeight, title, closable, spinner, spinnerIcon |
| 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.show(options) | Creates a new dialog with options, opens it and returns the dialog object. |
| SimpleBsDialog.version | Returns the current SimpleBsDialog's version. |