frontrow.js

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

Demo

See a simple live demo here!

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

Other functions

frontrow.dispose()

This method will remove the current modal from the DOM. This will not need an instance because

Roadmap

Soon:

• Load content from a remote HTML file (AJAX)
• Add styling API
• Suggest new stuff

Development

Installing any dependencies

npm install

Then run Gulp

gulp

Lastly open the page and any changes you make just need a browser refresh.

open index.html

License

MIT