CSS JS Modal Windows

Open modal windows for inline content, iframes, images and/or galleries.

Iframe

	                <a href="http://wikipedia.com"  data-fc-modules="modal">Iframe Link</a>
                

Images

Single image

Link to the image or html and add the data-fc-modules="modal"

	                <a href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg"  data-fc-modules="modal">Image Link</a>

                

Multiple images

Just use the class group-X to group you images

Inline content

To open a modal window from a inline content in the current page

	                <a href="#modal" data-fc-modules="modal">Inline Link</a>
<div class="hidden">
    <div id="modal">
        <img src="http://www.thinkstockphotos.es/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg" />
    </div>
</div>
                

Inline content of other page

To open a modal window from a inline content of something located in other page/url.

	                <a href="/index.html#features" data-fc-modules="modal">Inline Link</a>
                

Attributes

href

Defines the content to load

data-fc-width

Force the width of the modal window. Could be defined as px or %.

DEFAULT: auto

data-fc-height

NForce the height of the modal window. Could be defined as px or %.

DEFAULT: auto


Manual call

Sometimes you need to call a modal from another module. Take this module as example.


// 1. Define your module and set 'modal' as dependency
FrontendCore.define('myModule', ['modal'], function () {
	return {

		// 2. Instantiate modal as a object in your module
		oModal:  TinyCore.Module.instantiate( 'modal' ),

		onStart: function () {

			// 3. Save into a local var the scope
			var self = this;

			$('a').on('click',function(event) {
				event.preventDefault();

				// 4.Open in a modal this href
				self.oModal.open({
					href: this.href,
					width: '90%',
					height: '80%',
					onComplete: function() {
						// This function will be called when modal is rendered
					}
				});

				// 5. Closes the modal window
				self.oModal.close();
			});
		},
		onStop: function () {

			// 6.Set free some memory when module stops
			this.oModal = null;
		},
		onDestroy: function () {

			// 7. Delete oModal to avoid memory problems
			delete this.oModal;
		}
	};
});