bootstrap-modal-js
Currently supports bootstrap v5.1.2
Bootstrap 5 components "Modal"
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.
If it helps you, please star this repository
Demo
https://ZhangChengLin.github.io/bootstrap-modal-js/demo.html
Table of Contents
| How to use it |
| How to install |
| CDN |
| Parameter Description |
| Donate |
| License |
How to use it
<script src="https://cdn.jsdelivr.net/npm/bootstrap-modal-js/dist/bootstrap-modal-js.min.js"></script>
<script src="./dist/bootstrap-modal-js.js"></script>
<a href="javascript:;" onclick="bootstrapModalJs(parameter)">text</a>
OR
<a href="javascript:;" id="xx">text</a>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-modal-js/dist/bootstrap-modal-js.min.js"></script>
<script src="./dist/bootstrap-modal-js.js"></script>
<script>
const xx = document.querySelector("#xx");
xx.addEventListener("click", function () {
bootstrapModalJs(parameter);
}
</script>
OR MORE
How to install
npm i bootstrap-modal-js --save
OR
cnpm i bootstrap-modal-js --save
CDN
- jsDelivr
<script src="https://cdn.jsdelivr.net/npm/bootstrap-modal-js/dist/bootstrap-modal-js.min.js"></script>
OR
<script src="https://cdn.jsdelivr.net/npm/bootstrap-modal-js/dist/bootstrap-modal-js.js"></script>
- UNPKG
View all versions
https://unpkg.com/bootstrap-modal-js/
After the browser parses, get the latest version address
https://unpkg.com/bootstrap-modal-js
Parameter Description
bootstrapModalJs(title, body, footer, ModalSizes, VerticallyCentered, LongContentType, EventType, CallbackFunction, Options)
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 |
- EventType
Type: String
Default value: undefined
Description:
| parameter |
|---|
| show |
| shown |
| hide |
| hidden |
- CallbackFunction
Type: Function
Default value: undefined
Description:
- Options
Type: Object
Default value:
Description: Bootstrap Modal options
| parameter | default value (boolean) | other |
|---|---|---|
| backdrop | true | false | "static" |
| keyboard | true | false |
| focus | true | false |
| show | true | false |
Donate
| Method (priority) | type |
|---|---|
| alipay （支付宝） | QR code |
| QR code | |
| WeChat （微信） | |
| PayPal （贝宝） | PayPal.Me |
License
MIT
under the MIT License (license terms are at https://opensource.org/licenses/MIT).