Modal

Documentation updated on February 7th.

Description

The Modal widget is a member of Floats familiy. It gives rich information about an UI element on the screen.

Demo

Click over the ninja image to see a demo:

Code snippet

Any clickable HTMLElement, for example:

<img id="example" src="/src/assets/ninja.jpg" alt="ninja" />

Instance component

This is the way to create a new Modal:

var foo = $("#example").modal("<p>Rich content.</p>");

As any Floats children, the Modal has a few uses cases you can use to modifiy and manipulate its content and its size.

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").modal({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Modal API documentation.

Basics

Show and hide

All Floats exposes some public methods called show and hide, both allows to manage the Modal's behavior programmatically. Something like this:

foo.show(); // Shows the modal
foo.hide(); // Hides the modal

Read more about Floats.

Get and set content

All Floats exposes a public method called content, it works as a getter and a setter at the same time. To get the content of this component simply use the method without arguments, like this:

var content = foo.content(); // Get its content

To set content add an argument to the method content, admits static content, DOM content or AJAX content. See an example:

foo.content("New content!"); // Set its content

Read more about Content.

Changing size

For change the width property to the Modal's container there is a method called width, also works as a getter and a setter at the same time. To get the property simply use the method without arguments, like this:

var width = foo.width(); // Get its width

To set the property add an argument to the method width, admits Numbers (33) or String  ("33px") as a CSS property. See an example:

foo.width(300); // Set its width

Exactly the same thing with the method heigth, admits Numbers (22) or String ("22px") as a CSS property. Get example:

foo.height(); // Get its height

Set height example:

foo.height(300); // Set its height

Read more about Sizing.

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Modal API documentation.

Learn more about events on our step-by-step guide.