jsimnz / nifty.js

A easy jquery library to create modals designed from crodrops http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/

Nifty.js - v0.2

A JQuery plugin to create modal window effects based on codrops

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. Nifty.js is very simple to the Bootstrap Modal JS 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

Button Trigger

Using data-trigger attributes and data-target on a button or anchor.

  <button data-trigger='modal' data-target='#modalID'>Show Modal</button>

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.

<div class="nifty-modal [animation-class] [md-locked]" id="modal-1">
	<div class="md-content">
		<div class='md-title'>
			<h3>Modal Dialog</h3>
		</div>
		<div class='md-body'>
			<p>This is a modal window. You can do the following things with it:</p>
			<ul>
				<li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
				<li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
				<li><strong>Close:</strong> click on the button below to close the modal.</li>
			</ul>
			<button class="btn btn-primary md-close">Close me!</button>
		</div>
	</div>
</div>

An additional div is required (preferably at the bottom) to render the div into.

  <div class='md-overlay'></div>

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.

<div class="nifty-modal md-locked [animation-class]" id="modal-1">

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, @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.

nifty.js's Issues

Ajax in modal

Thx! Great module. But if load content via ajax, form not centered in window. How can create ajax callback?

Doesn't center on window resize

In the download example, if you launch the modal, then resize the window (in Firefox and Safari on Mac) the modal wanders off screen, rather than staying centered.

In the original Tympanus demo it stays centered.

Version control within Bower

I checked to see if a bower install nifty.js would get me the latest version with the .container removal, and it did. However I notice in my bower.json, the version to use is "nifty-js": "nifty.js#*".

This means if nifty.js is used in production, every time the project is deployed, the latest copy of nifty.js is installed via bower install, and some of those changes may have affected my build without me knowing.

I've never set up a bower project, so I did some reading and found that the version control is actually pretty simple. You just make a tag of nifty.js with git tag 0.2.1, then push the new Tag to Github with git push --tags.

Then in your nifty.js/bower.json, you update the Version to point at the Tag you just created, so 0.2.1. They require usage of "semver", which is Semantic Versioning, i.e. 3 octets: 0.2.1.

Info about how Semver works (it's simple):
http://semver.org/

Some more info:
http://stackoverflow.com/questions/19456091/bower-register-new-version

So ultimately, I'm just wondering if you can create a 0.2.1 tag for nifty.js and update the bower.json so everybody can count on specific versions when they use it in their production builds? :)

cd nifty.js
git tag 0.2.1
git push --tags
perl -pi -e 's/"version": "0.2"/"version": "0.2.1"/' bower.json

Cheers!

Demos don't work

Index.html and test.html don't work
--Chrome 42, Mint 17.1

Remove jQuery dependancy

Title says it all.

Want to remove dependancy on jQuery, replace with vanilla JS.

CSS conflicts

There are a few lines in the nifty CSS that conflict with our site's CSS, e.g. the following line:

@media screen and (max-width:32em){body{font-size:75%}}

Clearly, this causes all of our texts to shrink, which is not desirable. Please provide CSS that only touches the modals, such as:

@media screen and (max-width:32em){body .nifty-modal{font-size:75%}}

Blurry text in modal

Sometimes the text rendered in the modal is blurry. After some researching looks like it is caused by the way browsers handle transform/translate animations, by changing the objects from vectors to textures.

Nifty Modal

I found the problem and its solution. When we click "data-modal='#***'", script set transition propertires to all modal. If i have several modal window - it is not necessary:)
To solve this problem need:
in source code, find
$(".nifty-modal").css("transform", "translateX(-" + xcenter + "px) translateY(-" + ycenter + "px)")
$(self).addClass("md-show")
and change to
$(".self").css("transform", "translateX(-" + xcenter + "px) translateY(-" + ycenter + "px)")
$(self).addClass("md-show")

When 2 modals are on the page, the second one isn't positioned center

remove md-overlay requirement as sibling of .nifty-modal

Currently md-overlay block MUST be a sibling of any .nifty-modal, due to the way the background visibility works

.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
}

Which can be annoying. So lets change that.