https://github.com/maclovin/hellomodal
The modal component for developers
https://github.com/maclovin/hellomodal
Last synced: about 1 year ago
JSON representation
The modal component for developers
- Host: GitHub
- URL: https://github.com/maclovin/hellomodal
- Owner: maclovin
- License: mit
- Created: 2015-06-26T17:30:21.000Z (about 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-09-24T19:01:14.000Z (almost 11 years ago)
- Last Synced: 2025-03-11T12:14:05.887Z (over 1 year ago)
- Language: CSS
- Homepage: http;//maclovin.github.io/hellomodal
- Size: 219 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hello
The Modal Component For Developers
## Installation and requirements
- Install jQuery
- Copy hello minified in "/dist" folder to your lib directory.
_Actually the hello component check if you got a JSS object created or not. So, Nevermind. We can put the JSS component together._
## Features
- Auto position calcs to centralize modal component
- Full size mode
- Shadow background
- Show/Hide animation
- Callback execution on modal events (Load and Submit)
- Ajax content
- interoperable CSS (The Hello component haven't any theme. Only position properties.)
## Usage Examples
Markup:
```
Close
Tudo Muito Dark
Tudo Muito Dark
Tudo Muito Dark
```
Javascript:
```
var myModal = new Hello({
element: 'newsletterModal', //or $('#newsletterModal')
width: 600,
height: 300,
animation: true,
shadow, true,
ajax: '/something.html',
submit: function() {
alert('sup, dude :P');
}
});
myModal.show();
```
## Settings
#### element (required)
**Type:** _string_ or jquery selector _object_
---
#### width
**Type:** _integer_
---
#### height
**Type:** _integer_
---
#### full
**Type:** _boolean_
Show the full size modal.
---
#### animation
**Type:** _boolean_
---
#### shadow
**Type:** _boolean_
Show the shadow background and lock screen.
---
#### load
**Type:** _function_
Execute callback after modal loading.
---
#### submit
**Type:** _function_
Execute callback on ```.hello-submit``` click.
---
#### ajax
**Type:** _string_
Input data received from a request on modal body.
---
## Methods
Show/Hide modal with:
```
myModal.show();
`
myModal.hide();
```
## License
MIT 2015