nuModal

Download nuModal

nuModal is a lightweight, library-independent modal script,
works on all modern browsers, unobtrusive, no images, no additional files, just one line of JS to attach

(Version 1.0 - released December 13th, 2012)

More projects from Fotis Evangelou

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce metus arcu, aliquam non ullamcorper nec, luctus egestas lectus. Fusce nunc dolor, hendrerit a placerat ut, porttitor dapibus nunc. Praesent odio odio, fringilla convallis egestas vitae, sagittis sit amet turpis. Curabitur facilisis convallis nulla vel condimentum. Etiam in turpis felis, at semper sem. Duis ut ultrices nulla. Aliquam et mi lacus, at venenatis nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Open modal!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan, arcu id euismod adipiscing, purus nisi consequat ante, non rutrum odio lorem quis est. Phasellus iaculis, neque eu rutrum cursus, orci ligula eleifend mi, quis semper ipsum erat non felis. Suspendisse feugiat erat et leo ultrices fringilla vel quis neque. Nunc egestas condimentum ipsum, eget porttitor quam viverra vitae. Donec pulvinar sollicitudin mattis. Nullam ullamcorper nulla sit amet metus lobortis ac dapibus dui semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer pulvinar lorem at augue volutpat fringilla. Nulla semper ullamcorper sem nec vestibulum. Praesent accumsan aliquam metus, vel semper orci pharetra sed. Duis eget urna mi, at rhoncus arcu. Nulla facilisi.



Fusce at diam lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus, erat non commodo tristique, lacus turpis consequat nisl, quis congue nibh est in nibh. Praesent cursus venenatis bibendum. Suspendisse ipsum massa, interdum vitae rutrum in, eleifend et tortor. Mauris facilisis metus nec augue aliquam ultrices. Nam ornare tellus ut massa fringilla malesuada. Etiam id nisl erat, a lobortis purus.

Donec ac nisl in justo pellentesque egestas. Sed vel sem a lorem vestibulum vehicula. Curabitur non velit et tellus accumsan eleifend. Nullam lectus dolor, aliquet sed malesuada ac, sodales et diam. Suspendisse potenti. Phasellus mi nunc, placerat sit amet dapibus et, iaculis a dui. Sed consectetur rhoncus tortor pretium hendrerit. Nunc venenatis mauris ac elit tincidunt eget gravida augue ultricies. Ut vestibulum eros in arcu tempus dignissim. Etiam blandit nisi vitae nulla pharetra vitae tincidunt nibh eleifend.

Open another modal! (an iframe)

Vestibulum ac elit nisl, sit amet viverra arcu. Nam sit amet diam at leo convallis laoreet. Nulla facilisi. Maecenas et nisi vel felis molestie aliquam. Suspendisse potenti. Vestibulum rutrum tincidunt consequat. Donec in nisl ac sem mollis imperdiet.

Etiam eget magna turpis. Donec eget ante nec nunc rhoncus varius. Nulla condimentum sollicitudin neque ut consequat. Nam vel eros eget neque suscipit suscipit. Sed ultrices volutpat elementum. Aenean ut consectetur tortor. Vivamus nec quam dolor.

Usage Instructions

1. Grab the numodal.js file and upload on your server. You just need to link to it by adding the following code block inside the <head> section of your template or static pages:

<style type="text/css">.nuModalWindow{display:none;}</style>
<script type="text/javascript" src="path/to/numodal.js"></script>
				

2. To create modals, you need 2 things: a trigger and the modal window content. The modal window is any html element with a class "nuModalWindow" and any id set (mus be unique per modal window). The id is required for the "trigger" element to display the modal window contents. The trigger is a simple <a> element with a class called "nuModalTrigger" and as the link "href" we use the id we previously set on our html element with class "nuModalWindow". You can set the dimensions of the modal window using a "rel" attribute inside the <a> element and defining width & height in pixels like this: <a rel="width:height"...>. If you don't set any dimensions in the rel attribute, the plugin will enforce some default ones, but you can easily change that (just have a look at the end of the numodal.js file where everything is initialized). Here's a modal setup example:

<a href="#someID" class="nuModalTrigger" rel="600:400">Open modal!</a>
<div id="someID" class="nuModalWindow">Modal contents go here</div>
				
or
<a href="#anIframe" class="nuModalTrigger" rel="1040:600">Open modal!</a>
<iframe id="anIframe" class="nuModalWindow" src="http://some/url/goes/here/"></iframe>
				
The target element (aka the modal window) can be any html element that actually contains something or an iframe. Notice in the example above that you don't need to specify the dimensions of the iframe element, as you've already done so in the "trigger" using the rel attribute.
For images you should have a look at SimpleBox.

3. Enjoy!

Copyright © 2008- Fotis Evangelou.
This project is released under the GNU/GPL v2 license.