https://github.com/ZhangChengLin/bs-components-js
bootstrap v5 Modal JavaScript Function package.
https://github.com/ZhangChengLin/bs-components-js
bootstrap bootstrap-modal bootstrap5
Last synced: about 1 year ago
JSON representation
bootstrap v5 Modal JavaScript Function package.
- Host: GitHub
- URL: https://github.com/ZhangChengLin/bs-components-js
- Owner: ZhangChengLin
- License: mit
- Created: 2019-03-10T14:07:29.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2023-02-11T22:48:49.000Z (over 3 years ago)
- Last Synced: 2024-11-15T23:09:58.366Z (over 1 year ago)
- Topics: bootstrap, bootstrap-modal, bootstrap5
- Language: JavaScript
- Homepage:
- Size: 2.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README-modal.md
- License: LICENSE
Awesome Lists containing this project
README
# bsModalJs
## Demo
[https://ZhangChengLin.github.io/bs-components-js/docs/demo-modal.html](https://ZhangChengLin.github.io/bs-components-js/docs/demo-modal.html)
---
## Table of Contents
| Contents |
|:------------------------------------------------|
| [How to install](#how-to-install) |
| [How to use](#how-to-use) |
| [Parameter Description](#parameter-description) |
## How to install
- Install via NPM package
```
npm i bs-components-js --save
```
---
## How to use
```
text
```
OR
```
text
const xx = document.querySelector("#xx");
xx.addEventListener("click", function () {
bsModalJs(parameter);
})
```
OR MORE
## Parameter Description
Currently, relying on Bootstrap v5, because it is a function package of Bootstrap modal.
Supports arbitrary calls of 9 parameters, supports callback functions based on modal events.
```
bsModalJs(title, body, footer, ModalSizes, VerticallyCentered, LongContentType, Options, EventType, CallbackFunction)
```
**Return Values**
| type | such as | Description |
|:------:|:-------------:|:--------------------:|
| String | 1552756356601 | modal element number |
---
**title**
-
Type: String \| Function \| Function HTMLElement
Default value: undefined
Description: If you want to add a child element to the '.modal-header' element, use the Function HTMLElement.
说明： 如果要向 ".modal-header" 元素添加子元素，请使用 Function HTMLElement。
---
**body**
-
Type: String \| Function \| Function HTMLElement
Default value: undefined
Description:
---
**footer**
-
Type: String \| Function \| Function HTMLElement
Default value: undefined
Description:
---
**ModalSizes**
-
Type: String
Default value: undefined
Description:
| parameter |
|:---------:|
| sm |
| lg |
| xl |
| full |
| full-sm |
| full-md |
| full-lg |
| full-xl |
| full-xxl |
---
**VerticallyCentered**
-
Type: Boolean
Default value: false
Description:
| parameter |
|:---------:|
| true |
| false |
---
**LongContentType**
-
Type: Boolean
Default value: false
Description:
| parameter |
|:---------:|
| true |
| false |
---
**Options**
-
Type: Object
Default value:
Description: Bootstrap Modal
options
| parameter | default value (boolean) | other |
|:---------:|:-----------------------:|:---------------------:|
| backdrop | true | false | "static" |
| keyboard | true | false |
| focus | true | false |
---
**Events Type**
-
Type: String
Default value: undefined
Description:
| parameter |
|:-------------:|
| show |
| shown |
| hide |
| hidden |
| hidePrevented |
---
**Events Function**
-
Type: Function
Default value: undefined
Description: