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();
.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();
modal.set('title', 'Changed again');
modal.set('overlayColor', 'red');
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