Added readme
This commit is contained in:
parent
d4bec5b9d4
commit
a39c338dad
35
README.md
Normal file
35
README.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
# BSDialog4
|
||||||
|
|
||||||
|
> BSDialog4 is a JavaScript helper for improving Bootstrap 4 modals. Add (and remove) modals to a page dynamically and load content with jQuery-AJAX. Bootstrap 4 is required.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Add (inject) and remove modals into a page
|
||||||
|
- Load modal-content or modal-body from URL with jQuery-AJAX
|
||||||
|
- Stack multiple modals
|
||||||
|
- Movable modals
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Releases & Builds
|
||||||
|
|
||||||
|
See [Releases](/Ray/bsdialog4/releases)
|
||||||
|
|
||||||
|
## Documentation
|
||||||
|
|
||||||
|
See [Usage](wiki/USAGE.md)
|
||||||
|
|
||||||
|
## Acknowledgements
|
||||||
|
|
||||||
|
This software uses a number of dependencies and assets from third-parties.
|
||||||
|
These developers and artists deserve due credit for their work and for their commitment to sharing their work freely.
|
||||||
|
Each product is released under their own particular license, for more information please visit their websites.
|
||||||
|
|
||||||
|
- [Bootstrap](https://getbootstrap.com/)
|
||||||
|
- [jQuery](https://jquery.com/)
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the least restrictive terms of its dependencies, viz. MIT License.
|
||||||
195
wiki/USAGE.md
Normal file
195
wiki/USAGE.md
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
# View Usage
|
||||||
|
|
||||||
|
This is the usage guide for [BSDialog4](/bootstrap-js-bsdialog4), version 0.1.4.031.
|
||||||
|
|
||||||
|
## Show(options)
|
||||||
|
|
||||||
|
Creates the Modal on the page and loads the body from a URL. An existing box will be reused if the ID already exists.
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| ID | string | A unique identifier for the modal, so you can refer to multiple modals. |
|
||||||
|
| Title | string | Label at the top of the modal |
|
||||||
|
| Message | string | Text body of the modal |
|
||||||
|
| URL | string | URL to load into the modal body. Use null if loading isn't needed or a text message. |
|
||||||
|
| Size | string | Size of the modal (sm, md, lg, xl). Default is medium (md). |
|
||||||
|
| Colour | Bootstrap Colour | Colour of the close button in the bottom-right. Default is "secondary". |
|
||||||
|
| ShowFooter | bool | Show footer or not. Default is true. |
|
||||||
|
| EasyClose | bool | Close on click-away. Default is true. |
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
ID: null,
|
||||||
|
Title: "",
|
||||||
|
Message: "",
|
||||||
|
URL: null,
|
||||||
|
Size: "md",
|
||||||
|
Colour: "secondary",
|
||||||
|
ShowFooter: true,
|
||||||
|
EasyClose: true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
BSDialog.Show({
|
||||||
|
ID: "modalL1",
|
||||||
|
Title: "Modal Title",
|
||||||
|
Message: "Hello Momo!",
|
||||||
|
URL: null,
|
||||||
|
Size: "md",
|
||||||
|
Colour: "secondary"
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Prompt(options)
|
||||||
|
|
||||||
|
Creates a modal as a prompt. Prompts return a value.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
Type: "button",
|
||||||
|
Title: "",
|
||||||
|
Message: "",
|
||||||
|
Size: "md",
|
||||||
|
EasyClose: true,
|
||||||
|
Buttons: [
|
||||||
|
{ Label: "Yes", Value: "Yes", Colour: "primary" },
|
||||||
|
{ Label: "No", Value: "No", Colour: "secondary" },
|
||||||
|
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
|
||||||
|
],
|
||||||
|
Textbox: {
|
||||||
|
Label: "",
|
||||||
|
LabelSize: 4,
|
||||||
|
Placeholder: "",
|
||||||
|
Value: "",
|
||||||
|
BoxSize: 8
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let response = await BSDialog.Prompt({
|
||||||
|
Title: "Modal Title",
|
||||||
|
Message: "Are you sure want to wait for a response?",
|
||||||
|
Size: "md",
|
||||||
|
Buttons: [
|
||||||
|
{ Label: "Yes", Value: "Yes", Colour: "primary" },
|
||||||
|
{ Label: "No", Value: "No", Colour: "secondary" },
|
||||||
|
{ Label: "Cancel", Value: "Cancel", Colour: "secondary" }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
alert(response);
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let response = await BSDialog.Prompt({
|
||||||
|
Type: "textbox",
|
||||||
|
Title: "Modal Title",
|
||||||
|
Message: "Are you sure want to wait for a response?",
|
||||||
|
Size: "md",
|
||||||
|
Label: "",
|
||||||
|
Placeholder: ""
|
||||||
|
});
|
||||||
|
|
||||||
|
alert(response);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Update(options)
|
||||||
|
|
||||||
|
Change the Modal's title, body, footer etc...
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
ID: null,
|
||||||
|
Title: null,
|
||||||
|
Body: null,
|
||||||
|
BodyURL: null,
|
||||||
|
Footer: null,
|
||||||
|
Size: null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Exists(id)
|
||||||
|
|
||||||
|
Check if modal exists by identifier
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| id | string | A unique identifier for the modal, so you can refer to multiple modals. |
|
||||||
|
|
||||||
|
### Returns
|
||||||
|
|
||||||
|
| | Type | Description |
|
||||||
|
|---|------|-------------|
|
||||||
|
| | bool | True, if modal exists |
|
||||||
|
|
||||||
|
## Find(id)
|
||||||
|
|
||||||
|
Find Modal by its identifier
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| id | string | A unique identifier for the modal, so you can refer to multiple modals. |
|
||||||
|
|
||||||
|
### Returns
|
||||||
|
|
||||||
|
| Property | Type | Description |
|
||||||
|
|----------|------|-------------|
|
||||||
|
| Title | array of elements | An array of Modal title elements, for the first modal only. |
|
||||||
|
| Body | array of elements | An array of Modal body elements, for the first modal only. |
|
||||||
|
| Footer | array of elements | An array of Modal footer elements, for the first modal only. |
|
||||||
|
| Close | array of elements | An array of close elements, for the first modal only. |
|
||||||
|
| Modal | array of elements | An array of Modal elements |
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
Title: [],
|
||||||
|
Body: [],
|
||||||
|
Footer: [],
|
||||||
|
Close: [],
|
||||||
|
Modal: []
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
BSDialog.Find("exampleModal1");
|
||||||
|
```
|
||||||
|
|
||||||
|
## Close(id)
|
||||||
|
|
||||||
|
Close the Modal by the box identifier.
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
|-----------|------|-------------|
|
||||||
|
| id | string | Unique identifier for the modal |
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
BSDialog.Close("exampleModal1");
|
||||||
|
```
|
||||||
|
|
||||||
|
## Clear()
|
||||||
|
|
||||||
|
Close all Modals on the page.
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
BSDialog.Clear();
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue
Block a user