Frontrow NPM | npm.io

frontrow.js

Customizable modals for the humanity. No jQuery required and no dependencies.

Demo

Install

From npm

npm install --save frontrow

or manually (from the dist folder)

<link rel="stylesheet" href="frontrow.min.css">
<script src="frontrow.min.js"></script>

Usage

`frontrow(elem, [options])`

This (only) method allows you to launch a modal window when the elem is clicked. The options object (optional) can have the following properties, which will help you customize the modal's behaviours:

Option	Description
`title`	The title of the modal which appears in its header
`confirmBtnText`	The text of the confirm button. Defaults to `'Confirm'`
`cancelBtnText`	The text inside the cancel link. Defaults to `'cancel'`
`overlayColor`	The CSS color property of the overlay behind the modal. Defaults to `'white'`
`overlayOpacity`	The CSS opacity property of the overlay behind the modal. Defaults to `0.8`
`content`	The selector of the DOM element (inner) that will be rendered in the modal's body
`width`	The width of the modal. If set to `'none'`, it will take the entire page's width. If set to `'auto'`, the modal will take the width of the content. Defaults to `'300px'`
`height`	The height of the modal. If none is specified, it will automatically set itself to fit the content of the modal. If specified, a vertical scrollbar will appear only if there is not enough room for the content
`confirmCallback`	The callback function that executes when the confirm button is clicked. Defaults to `frontrow.dispose()` thus, closes the modal
`openCallback`	The callback function that executes when the modal appears and fully renders its content

More options will be added soon.

API

When you create a modal using frontrow(elem, options), an instance of modal is returned. This instance exposes a few methods which you can use to manipulate the actual modal before/after is rendered.

.show()

This allows you to render and show a modal without clicking on the associated button:

<button id="myModal">Launch Modal</button>

var modal = frontrow('myModal');
modal.show(); // Shows the modal

.set(option, value)

This sets the value of one of the options to the instance. If the modal is showing already, the options are set on the fly. You can use any of the options in the table above.

<button id="myModal">Launch Modal</button>

var modal = frontrow('myModal', {title: 'Hello World!'});
modal.set('title', 'Another Title!');
modal.show(); // Shows the modal with the new title
modal.set('title', 'Changed again'); // switches the title on the fly
modal.set('overlayColor', 'red'); // Switches the overlay color on the fly