Modal windows

Visual colors, and visual messages.

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

Iframe

Iframe Link 
<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"

Image Link 
<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

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

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

Inline content of other page

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

Inline Link 
<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

data-fc-class

Add a class to the #colorbox on open

DEFAULT: null

data-fc-mobile

If you set this to false, the modal behaviour will not be applied if device is a mobile phone or tablet.

DEFAULT: true

data-fc-href-suffix

Adds a suffic to the href paramater on open modal windows. For example: '?modal=1'

DEFAULT: null

data-fc-close

If false, the modal windows will not have close buttonk.

DEFAULT: true

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;
		}
	};
});