Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zenoo/quickmodal
Quick Modal Generator
https://github.com/zenoo/quickmodal
modal plugin
Last synced: about 1 month ago
JSON representation
Quick Modal Generator
- Host: GitHub
- URL: https://github.com/zenoo/quickmodal
- Owner: Zenoo
- License: mit
- Created: 2017-11-23T08:34:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T13:43:32.000Z (over 1 year ago)
- Last Synced: 2024-11-20T03:44:32.790Z (about 1 month ago)
- Topics: modal, plugin
- Language: JavaScript
- Homepage:
- Size: 875 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# quickModal
Create a custom modal quickly.
### Doc
* **Installation**
Simply import QuickModal into your HTML.
```
```
* **How to use**
Initialize your modal:
```
// Without jQuery
const modal = new QuickModal(options);
// Shorthand for a simple title + body
const modal = new QuickModal('Your title', 'Your message');
// With jQuery
$(document).quickModal(options);
```
* **Options**
```
{
document: window.document, // Document in which the QuickModal should be opened into, window.document is used by default
darkenBackground: true, // Darken your page background when the modal is active
isForm: true, // Your modal contains a form
keepHidden: false, // Hide the modal instead of destroying it on close
closeText: 'OK', // Close button text
classes: [], // Your modal classes (String[])
attributes: { // Your modal additional attributes (attribute name : attribute value)
'data-modal': 'true'
},
form: { // If isForm is set to true, this object will define your form properties
action: 'path/to/your/form', // Form ACTION attribute
method: 'POST', // Form METHOD attribute
id: 'formId', // Form ID
classes: [], // Form classes (String[])
submit: 'OK' // Form Submit text
},
header: '
Custom HTML', // Modal header content
body: [ // Array containing all your modal lines
{
type: 'text', // Possible values ["text","form"] If set to 'text', creates a simple HTML node
text: 'I am Text !', // Your line text
tag: 'h3', // Your line tag
id: 'myId', // Your line id
classes: [ // Your line classes
'class1',
'class2'
],
attributes: { // Your line additionnal attributes
'data-modal': 'true'
},
children: [ // List of children elements
{
type: 'text',
text: 'I am Text !',
tag: 'h3',
id: 'myId',
classes: [
'class1',
'class2'
],
attributes: {
'data-modal': 'true'
},
children: [ ... ]
}
]
},
{
type: 'form', // Possible values ["text","form"] If set to 'form', create a new HTML Node with a label and your tag.
label: 'I am Input !', // Your input label
inputType: 'text', // If tag == 'input', set this to set your input TYPE attribute
placeholder: 'Placeholder', // If tag == 'input' or 'textarea', set this to set your input PLACEHOLDER attribute
name: 'formText', // Your input NAME attribute
value: 'currentValue', // Your input VALUE attribute
tag: 'input', // Your input tag
id: 'myInput', // Your input ID
classes: [ // Your input classes
'class1',
'class2'
]
},
{
type: 'form',
label: 'I am Select !',
name: 'formSelect',
tag: 'select',
id: 'mySelect',
classes: [
'class1',
'class2'
],
options: [ // If tag == 'select', contains your select options
{
value: 'val',
text: 'Option 1',
selected: false,
attributes: { //Add attributes to your options
'data-modal': 'true'
}
},
{
value: 'val2',
text: 'Option 2',
selected: true
},
]
}
],
footer: [ // Contains an array of links displayed at the bottom of your modal
{
text: 'I am Link !', // Your link text
href: 'path/to/link', // Your link Href
id: 'myLink', // Your link ID
classes: [ // Your link classes
'class1',
'class2'
]
}
],
afterOpen: function(modal) {}, // Callback triggered after the modal opens. Parameter is the modal NODE.
beforeClose: function(modal) {}, // Callback triggered right before the modal closes. Parameter is the modal NODE.
onSubmit: function(event, form) {} // Callback triggered when the form is submitted. Parameter are the event and the form NODE.
}
```
* **Methods**
```
modal.open(); // Opens the modal (If previously closed)
modal.close(); // Closes the modal
modal.destroy(); // Destroys the modal
```
* **Example**
See this [JSFiddle](https://jsfiddle.net/Zenoo0/w4p57wmh/) for a working example
## Authors
* **Zenoo** - *Initial work* - [Zenoo.fr](http://zenoo.fr)