Designed for designers & developers
Need reasons to use this plugin? Check the features below.
HTML5, CSS3, & JS
Written with HTML5, CSS3, and pure Javascript with no dependency on jQuery.
Responsive
Dialog sections automatically size themselves to the contents and parent window for hands free aesthetics.
GreenSock Library
Utilizes the GreenSock library to provide seamless animations.
Design
Automatic and custom styling methods are a breeze to implement and do not require changing the underlying javascript or CSS files.
Animations
User options provide 6 animation callbacks to spice up the dialog experience.
Font Awesome Icons
Accepts any icon available through the Font Awesome library.
Customizable Title & Icon
StyleBox.js
A robust modal dialog box plugin that is easy to style and animate.
A robust modal dialog box plugin that is easy to style and animate.
OK
Alert Types
Customizable Buttons with Callback
Customizable Title Icons
Exit Button Styles
Automatic Section & Color Styling
Custom Styling
Animation Callbacks
Injectable HTML
Copy Files
After downloading and extracting the plugin, copy the StyleBox folder to your server.
Link Files
Include the following markup in the head
section of your document. If you prefer, move the markup anywhere before the closing
body tag.
<link rel="stylesheet" href="StyleBox/Lib/Font Awesome/css/font-awesome.min.css" /> <link rel="stylesheet" href="StyleBox/StyleBox.min.css" /> <script src="StyleBox/Lib/Greensock/TweenMax.min.js"></script> <script src="StyleBox/Lib/Greensock/SplitText.min.js"></script> <script src="StyleBox/styleBox.min.js"></script> <script src="StyleBox/styleBox.animations.min.js"></script>
Call Plugin
To call a message box, add the following click event to any button tag or add as an event to whatever
necessary:
<script>
StyleBox.modal({
title: "My Title",
message: "My Message"
});
</script>
As an alternative, you can also set the message in the first property followed with the Options object as the second property:
<script>
StyleBox.modal("My Message", {
title: "My Title"
});
</script>
Plugin Options Cheatsheet
The following are all of the available user options for the plugin and their default value, if applicable:
<script>
StyleBox.modal({
alertType : ['none'], /* [ 'none'||'warning'||'info'||'confirm'||'error'||'question'||'success'||'danger' , 'striped'] */
beforeClose : null, /* Animation 'ani.beforeClose' function || callback function */
borderRadius : [10], /* [outer radius , button radius] */
buttons : [0], /* [ 0-default||1-'OK'||2-'OK''CANCEL'||3-'YES''NO''CANCEL'||4-CUSTOM, [ ['Custom1','Custom1 Icon', 'Icon Color'],['Custom2','Custom2 Icon', 'Icon Color'] ] */
exitBtnStyle : 'circle', /* 'circle' || 'corner' || 'simpleX' */
icon : ['default'], /* [ 'default'||'custom', 'fa fa-icon' ] */
iconStyle : ['fa-lg'], /* [size, color] */
keyboard : true, /* Pressing 'ESC' key closes dialog */
message : null, /* Message text or HTML markup */
onBtnHover : ani.onBtnHover.buttonHighlight, /* Animation 'ani.onBtnHover' function || callback function */
onClose : null, /* Callback || function to call after dialog closes. Returns button pressed. */
onCloseHover : ani.onCloseHover.buttonHighlight, /* Animation 'ani.onCloseHover' function || callback function */
onOverlay : null, /* Animation 'ani.onOverlay' function || callback function */
onRenderMsg : null, /* Animation 'ani.onRenderMsg' function || callback function */
onShow : null, /* Animation 'ani.onShow' function || callback function */
overlayClose : true, /* Clicking on overlay closes dialog */
overlayOpacity : 0.4, /* Overlay opacity */
parent : document.body, /* Parent object of dialog box and overlay */
style : {
bgColor : , /* Dialog background color */
borderColor : , /* Dialog border color */
buttonColor : , /* Dialog button color */
buttonHighColor : , /* Dialog button highlight color */
bxSh : , /* Dialog box-shadow */
colorScheme : 'lite', /* Auto-style color scheme */
custom : false, /* Has custom styling */
footerColor : , /* Custom footer color */
footerColorHsl : , /* Custom footer color HSL % */
footerSepColor : , /* Custom footer separator color */
footerSepHsl : , /* Custom footer separator color HSL % */
hasFooterColor : false, /* Has footer bar color */
hasFooterSep : false, /* Has footer bar separator color */
hasHeaderColor : false, /* Has header bar color */
hasHeaderSep : false, /* Has header bar separator color */
headerColor : , /* Custom header color */
headerColorHsl : , /* Custom header color HSL % */
headerSepColor : , /* Custom header separator color */
headerSepHsl : /* Custom header separator color HSL % */
},
textAlign : 'center', /* Message text alignment */
title : '', /* Message title */
width : 0 /* Auto-width override */
});
</script>
Plugin Settings
Plugin accepts settings from an object of key/value pairs.
| Property | Type | Default | Description |
|---|---|---|---|
| alertType | Array (strings) | ['none'] | Alert type of box. Possible alert types are 'none', 'warning', 'info', 'confirm', 'error', 'question', 'success', or 'danger'. If has 'striped' as second value, header has stripes. |
| beforeClose | Callback||Function | null | Animation callback executed prior to the onClose callback that allows message box animation prior to closing. |
| borderRadius | Array (integers) | [10] | First value is dialog-radius and second value is button-radius |
| buttons | Array (integer, array) | [0] | Buttons to display. First value can be 0 -default, 1 -'OK', 2 -'OK' 'CANCEL', 3 -'YES' 'NO' 'CANCEL', or 4 -CUSTOM. If 4, second value can be an array of 'button name', 'button icon' (optional) values. |
| exitBtnStyle | String | 'circle' | Exit button style to use. Possible values are 'circle', 'corner', or 'simpleX'. |
| icon | Array (strings) | ['default'] | Icon to display before title. Possible values are 'default' for default icon defined by alert type or 'custom' followed by second value that defines the font-awesome icon. |
| iconStyle | Array (strings) | ['fa-lg'] | Icon style to apply to icon. Possible values are any valid font-awesome size or pixel size ('12px') followed by second value (optional) that defines the Hex color. |
| keyboard | Boolean | true | Defines whether pressing 'ESC' key closes the dialog. |
| message | String||Callback | null | Message text or callback to function the returns HTML of message. Use '|' for line break if regular text. |
| onBtnHover | Callback||Function | ani.onBtnHover.buttonHighlight | Animation callback when the button(s) mouseEnter event is triggered or reference to function in StyleBox.animation namespace. Accepts 'button' element as an argument. |
| onClose | Callback||Function | null | Callback after the dialog has been closed or reference to function in StyleBox.animation namespace. Accepts 'caption' of button pressed as an argument. |
| onCloseHover | Callback||Function | ani.onCloseHover.buttonHighlight | Animation callback when the close button mouseEnter event is triggered or reference to function in StyleBox.animation namespace. Accepts 'button' element as an argument. |
| onOverlay | Callback||Function | null | Animation callback for the overlay or reference to function in StyleBox.animation namespace. Accepts 'element' as an argument. |
| onRenderMsg | Callback||Function | null | Animation callback when the message text is rendered or reference to function in StyleBox.animation namespace. Accepts 'message' as an argument. |
| onShow | Callback||Function | null | Animation callback when the dialog appears or reference to function in StyleBox.animation namespace. Accepts 'element' as an argument. |
| overlayClose | Boolean | true | Defines whether clicking anywhere on overlay closes the dialog. |
| overlayOpacity | Float | 0.4 | Defines the opacity of the overlay. |
| parent | Object | document.body | Defines the parent object of the dialog. |
| style | Object | see style property | Defines any custom user styling applied to dialog. See style properties below for possible key/value pairs. |
| textAlign | String | 'center' | Defines the text alignment of the dialog message. |
| title | String | '' | Defines the title to display. |
| width | Integer | 0 | User option to specify width in case automatic width does not generate desired results. |
style property
style property accepts settings from an object of key/value pairs.
| style Property | Type | Default | Description |
|---|---|---|---|
| bgColor | String | Defines custom background color of dialog. | |
| borderColor | String | Defines custom border color of dialog. | |
| buttonColor | String | Defines custom background color of dialog buttons. | |
| buttonHighColor | String | Defines custom highlight color of dialog buttons. | |
| bxSh | String | Defines custom box shadow of dialog. | |
| colorScheme | String | 'lite' | Defines color scheme of dialog utilized by automatic styling. |
| custom | Boolean | false | Defines whether dialog has custom styling. |
| footerColor | String | Override of footer color defined by automatic styling. | |
| footerColorHsl | String | Override of footer HSL percentage defined by automatic styling. | |
| footerSepColor | String | Override of footer separator color defined by automatic styling. | |
| footerSepHsl | String | Override of footer separator HSL percentage defined by automatic styling. | |
| hasFooterColor | Boolean | false | Defines whether dialog has footer bar. |
| hasFooterSep | Boolean | false | Defines whether dialog has footer separator. |
| hasHeaderColor | Boolean | false | Defines whether dialog has header bar. |
| hasHeaderSep | Boolean | false | Defines whether dialog has header separator. |
| headerColor | String | Override of header color defined by automatic styling. | |
| headerColorHsl | String | Override of header HSL percentage defined by automatic styling. | |
| headerSepColor | String | Override of header separator color defined by automatic styling. | |
| headerSepHsl | String | Override of header separator HSL percentage defined by automatic styling. |
FAQ
This plugin does not require jQuery as 100% of the code is written in
pure javascript.
The StyleBox.animations.js file is the file that holds
all of the "built-in" animations available for the various animation
callbacks accessible through the user options. It is included as a
separate file to give the user an option to add their own custom
animations without having to modify the primary javascript file.
This file is part of the GreenSock library. If you
have not heard of GreenSock, it is the most effective
javascript library for animating the web. For more information, visit
their website.
The goal of StylBox.js is to provide a robust dialog box that it so easy the stlye and animate that the user can use it from project to project without having to change the underlying css or javascript files. StyleBox.js should be designed to accomidate 90% of the user needs in the following situations:
- As a simple alert box.
- As a simple message box.
- As a dialog box that requests a response through the use of buttons.
- As a complex dialog box used to display additional HTML markup (i.e. progress bar or image) so long as the contents are not intended to behave like a form or request user input.
Roadmap
For more up-to-date information on release dates for these versions, please refer to the Issues Milestones.
| Version | Description |
|---|---|
| 1.0.0 | Initial release not published on GitHub and limited in distribution. |
| 1.1.0 | Initial release on GitHub. |
Changelog / Future Releases
CSS Changes
- Not listed since initial version limited in distribution.
Javascript Changes
- Not listed since initial version limited in distribution.
CSS Changes
- None.
Javascript Changes
- Add close to Return key press.
CSS Changes
- Release StyleBox.tiny.css add-on
Javascript Changes
- Add ability to use Material Design Icons from Google.
- Add ability to move dialog box.
- Look into enhancing message callback functionality.
- Release StyleBox.tiny.js add-on
Issues
- None submitted.