https://github.com/torann/jquery.modaler
Not that the jQuery world needed another modal plugin.
https://github.com/torann/jquery.modaler
Last synced: about 1 month ago
JSON representation
Not that the jQuery world needed another modal plugin.
- Host: GitHub
- URL: https://github.com/torann/jquery.modaler
- Owner: Torann
- License: other
- Created: 2017-08-25T15:20:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-29T20:39:51.000Z (almost 7 years ago)
- Last Synced: 2025-02-15T05:43:44.749Z (3 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery Modals
Not that the jQuery world needed another modal plugin. Make sure to read the *requirements* at the bottom.
## Getting Started
You can install the plugin using Bower:
```bash
bower install jquery.modaler
```
The plugin comes with a simple SASS file for styling the modals.
**Include files**
```html
```
## Basic use
### Automatically attaching
The simplest approach is to add `data-modal` to your desired element and use the attribute's value to specify modal to open.
```html
...
Open Modal
```
## Options
- `action` - this is used to show, hide, or toggle the modal (default `toggle`)
- `destroyOnClose` - remove the modal after closing. Useful for dynamic modals. (default `false`)
- `primaryContent` - this is the selector for the primary content. (default `.modal-content`)
- `activeClass` - modal active class added to the modal and body tag. (default `modal-is-active`)
- `inactiveClass` - modal inactive class added to the modal. (default `modal-is-inactive`)
- `aboveClass` - modal above active class added to the modal once fully visible (default `modal-is-above`)
### Close button
- `backdropCloseEnabled` - clicking on the backdrop closes the modal. (default `true`)
- `closeBtnSelector` - selector used to close the modal. Must be within the modal. (default `[data-modal-close]`)
### Form options
- `onSubmit` - Callback for onsubmit event. (default `null`)
- `reload` - Reload the page after submitting. (default `false`)
- `clearform` - Clear the form after submitting. (default `false`)
## Manual Use
```js
var $instance = $('#magic-modal').modal({
action: null,
afterClosed: function(ev) {
ev && ev.preventDefault();
// Some action
},
onSubmit: function(ev, $form) {
ev && ev.preventDefault();
// Some form action
},
});
// Open modal
$instance.modal('show');
// Hide modal
$instance.modal('hide');
// Toggle modal
$instance.modal('toggle');
```
### Dynamic Modal
Doing this, the plugin will automatically append the modal to the DOM and carry-on as usual.
```js
var $instance = $('
Some modal content stuff').modal();
```
> You may wish to use the `destroyOnClose: true` option here
## Big Example
**Modal Trigger HTML**
```html
Update Settings
```
**Modal HTML**
```html
```
## Requirements
- [jquery.form](http://malsup.com/jquery/form)
This helper function toggles an on page load indicator.
```
$.toggleLoader(int) // Int: 1 = show, 0 = hide
```