https://github.com/omaxel/fullmod
A tiny jQuery full-screen modal component.
https://github.com/omaxel/fullmod
jquery-plugin modal modal-plugin modal-windows
Last synced: 6 months ago
JSON representation
A tiny jQuery full-screen modal component.
- Host: GitHub
- URL: https://github.com/omaxel/fullmod
- Owner: omaxel
- Created: 2018-03-15T09:36:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:51:52.000Z (almost 3 years ago)
- Last Synced: 2025-04-10T01:04:48.709Z (6 months ago)
- Topics: jquery-plugin, modal, modal-plugin, modal-windows
- Language: JavaScript
- Homepage: https://omaxel.github.io/FullMod/
- Size: 563 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FullMod
FullMod is a tiny jQuery full-screen modal component.
[**DEMO**](https://omarmuscatello.github.io/FullMod/)
* [Dependencies](#dependencies)
* [Usage](#usage)
* [Events](#events)
* [Methods](#methods)
* [CSS classes](#css-classes)
## Dependencies
* [jQuery](https://jquery.com/)
## Usage
Inside your `head`, add the following code:
Before closing the `body` element, add the following code:
Add this HTML in your page:
This is my title
This is the content of the modal.
Then you can show the modal using:
var myFullMod = $('#myFullMod').fullmod();
myFullMod.show();
## Events
You can attach events passing them as options in the fullmod constructor.
$('#myFullMod').fullmod({
onShowing: function(params) {
console.log('showing');
}
});
You can access to the fullmod instance from all events using the `this` object.
**onShowing(params)** _(type: `function`, default value: `null`)_
Function executed when the modal is hidden and the `show` method is called. If return `false`, the modal will never show.
The `params` parameter is the one specified when the `show` method is called.
**onShown** _(type: `function`, default value: `null`)_
Function executed when the modal is completely shown after the `show` method is called.
**onHiding(params)** _(type: `function`, default value: `null`)_
Function executed when the modal is shown and the `hide` method is called. If return `false`, the modal will never hidden.
The `params` parameter is the one specified when the `hide` method is called.
**onHidden** _(type: `function`, default value: `null`)_
Function executed when the modal is completely hidden after the `hide` method is called.
## Methods
**show(params)**
Shows the modal unless the `onShowing` function call returns `false`. If the modal is already shown and the `show` method is called, nothing happens (the `onShowing` function won't be called).
The `params` parameter is the object to pass to the `onShowing` event.
**hide(params)**
Shows the modal unless the `onHiding` function call returns `false`. If the modal is already hidden and the `hide` method is called, nothing happens (the `onHiding` function won't be called).
The `params` parameter is the object to pass to the `onHiding` event.
## CSS classes
| Action | Description | Classes |
|-----------------------|-------------------------------------------------------------------------------------------------------------|-------------------|
| Page loaded. | The modal is hidden. | `fullmod-hidden` |
| `show` method called. | The modal is hidden. If the `onShowing` function is null or returns `false`, the animation will be started. | `fullmod-showing` |
| | Show animation completed. | `fullmod-shown` |
| `hide` method called. | The modal is shown. If the `onHiding` function is null or returns `false`, the animation will be started. | `fullmod-hiding` |
| | Hide animation completed. | `fullmod-hidden` |