#uiblock.js
What is it?
A lightweight, "lightbox-like" jQuery plugin to popup things and block the interface of your small project.
- It's tiny! Just 5KB
- Easy to customize
- Allows callback functions
Installation
How to use?
Auto-mode
Don't have time? Just call this in a jQuery event or when you DOM is ready:
uiblock.fn.auto();And add this to your HTML code:
<a href="#" class="ui-block" data-ui-block-content="#your_content" data-ui-block-close-button="yes" data-ui-block-close-overlay="yes" data-ui-block-disable-esc="no">My button</a>If you need to add some callback functions, where's how:
uiblock.options.callback.onLoad = function () { console.log('uiblock.js opened!'); } uiblock.options.callback.onClose = function () { console.log('uiblock.js closed!'); }Standard mode
Do you want to fully customize uiblock.js? Here's all the options you'll need:
uiblock.fn.init ({ // Your content element container: '#test_content', // Your content settings content: { // Displays close button closeButton: false, // Apply any CSS styles in JS to the container below here (object) css: { } }, // uiblock.js overlay settings overlay: { // Allow user to click on overlay and close it canClose: false, // Prevent user to close uiblock.js by pressing ESC disableEsc: false, // Apply any CSS styles in JS to the overlay right here (object) css: { } }, // You may add some callback functions too... events: { // When uiblock.js is loaded onLoad: function () { console.log('uiblock.js was opened.'); }, // When uiblock.js is closed onClose: function () { console.log('uiblock.js was closed.'); } }, // You can specify your own classes for the block container or the close button (optional) classes: { open: ".ui-block", close: ".ui-block-close" } });Help?
Tweet me: @guimadaleno
License
GNU GPL
Peace out!
By Guilherme Madaleno Web Designer - Belo Horizonte - BH https://www.guimadaleno.com.br
