Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsimnz/nifty.js
A easy jquery library to create modals designed from crodrops http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
https://github.com/jsimnz/nifty.js
Last synced: about 1 month ago
JSON representation
A easy jquery library to create modals designed from crodrops http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
- Host: GitHub
- URL: https://github.com/jsimnz/nifty.js
- Owner: jsimnz
- License: mit
- Created: 2015-03-29T10:19:31.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-26T15:13:49.000Z (almost 8 years ago)
- Last Synced: 2024-09-27T22:44:03.000Z (about 2 months ago)
- Language: CSS
- Size: 52.7 KB
- Stars: 37
- Watchers: 5
- Forks: 16
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Nifty.js - v0.2
==========
A JQuery plugin to create modal window effects based on [codrops](http://tympanus.net/Development/ModalWindowEffects/)
## What is it
Nifty.js is a simply jquery library designed to create modals with stunning css animations. This library and animations are based on the amazing work from [codrops](http://tympanus.net/Development/ModalWindowEffects). Nifty.js is very simple to the [Bootstrap Modal JS](http://getbootstrap.com/javascript/#modals) system.
## Install
Nifty.js requires jQuery (>= 1.8.0) (for now, will remove jQuery dependencies later).
Other then that, simply add the nifty.js (minified coming) to your project wherever you place your js
## Usage
Like mentioned above, Nifty.js works similar to [Bootstrap Modal JS](http://getbootstrap.com/javascript/#modals)
##### Button Trigger
Using `data-trigger` attributes and `data-target` on a button or anchor.
```
Show Modal
```
##### Show Modal
```
$("#modalID").nifty("show")
```
##### Hide Modal
```
$("#modalID").nifty("hide")
```
##### Update Modal
```
$("#modalID").nifty("update")
```
Use this method if you need to update and reposition the modal after content has been dynamically added to it.
##### Events
* `show.nifty.modal` - This event is fired immediately when the `show` method is called or when a button is clicked with a data-trigger attribute.
* `shown.nifty.modal` - This event is fired after the modal is finished showing. This waits for all the animations/transitions to finish.
* `hide.nifty.modal` - This event is fired immediately when the `hide` method is called, or when the `close` button on a modal is clicked.
* `hidden.nifty.modal` - This event is fired when the modal is finished being hidden and all animations/transitions are complete.
## Structure
The structure of the modal HTML is specific.
```
Modal Dialog
This is a modal window. You can do the following things with it:
-
Read: Modal windows will probably tell you something important so don't forget to read what it says.
-
Look: modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.
-
Close: click on the button below to close the modal.
Close me!
```
An additional div is required (preferably at the bottom) to render the div into.
```
```
You can optionally include a `md-locked` class on your `nifty-modal` div, which will prevent users from closing the nifty-modal by clicking the overlay. Useful when you have a modal that the user is required to interact with.
```
```
## Animations
To specify the modal animation, you just add the desired animation class to the modal along with the `nifty-modal` class.
Animation Name | CSS Class
--- | ---
Fade In and Scale Up | `.fade-in-scale`
Slide from the Right | `.slide-in-right`
Slide from the Bottom | `.slide-in-bottom`
Newspaper | `.newspaper`
Fall In | `.fall`
Side Fall In | `.slide-fall-in`
Slide in and Stick to Top | `.slide-in-top-stick`
3D Flip Horizontal | `.flip-horizontal-3d`
3D Flip Veritcal | `.flip-vertical-3d`
3D Sign | `.sign-3d`
3D Slit | `.slit-3d`
3D Rotate from Bottom | `.rotate-bottom-3d`
3D Rotate in from Left | `.rotate-in-left-3d`
Super Scaled | `.super-scaled`
Just Me | `.just-me`
Blur | `.blur`
Slide in from Bottom (w/Perspective) | `.slide-in-bottom-perspective`
Slide from Right (w/Perspective) | `.slide-in-right-prespective`
Slip in from Top (w/Perspective) | `.slip-in-top-perspective`
## Authors
**John-Alan Simmons** [iamjsimnz](https://github.com/jsimnz), [@iamjsimnz](https://twitter.com/iamjsimnz)
## LICESNCE
```
The MIT License (MIT)
Copyright (c) 2015 John-Alan Simmons
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```