jQuery lobibox Plugin Demos

horizontalOffset: 5, //If the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset
width           : 600,
height          : 'auto',  // Height is automatically given calculated by width
closeButton     : true,  // Show close button or not
draggable       : false,  // Make messagebox draggable 
customBtnClass  : 'lobibox-btn-default', // Class for custom buttons
modal           : true,
debug           : false,
buttonsAlign    : 'center', // Position where buttons should be aligned
closeOnEsc      : true,  // Close messagebox on Esc press

//Overriding default options
Lobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, {
    ... //override any options from default options
});

Lobibox.base.OPTIONS = {
//DO NOT change this value. Some functionality is depended on it
    bodyClass       : 'lobibox-open',
//DO NOT change this object. Some functionality is depended on it
    modalClasses : {
        'error'     : 'lobibox-error',
        'success'   : 'lobibox-success',
        'info'      : 'lobibox-info',
        'warning'   : 'lobibox-warning',
        'confirm'   : 'lobibox-confirm',
        'progress'  : 'lobibox-progress',
        'prompt'    : 'lobibox-prompt',
        'default'   : 'lobibox-default',
        'window'    : 'lobibox-window'
    },
//This is option how buttons can be shown. What are buttonsAlign option available values
    buttonsAlign: ['left', 'center', 'right'],
//You can change the title or class of buttons from here or use the same structure object for button when creating messagebox
//closeOnClick : true will close the messagebox when clicking this type of button. Set it to false not to close messagebox when clicking on it
    buttons: {
        ok: {
            'class': 'lobibox-btn lobibox-btn-default',
            text: 'OK',
            closeOnClick: true
        },
        cancel: {
            'class': 'lobibox-btn lobibox-btn-cancel',
            text: 'Cancel',
            closeOnClick: true
        },
        yes: {
            'class': 'lobibox-btn lobibox-btn-yes',
            text: 'Yes',
            closeOnClick: true
        },
        no: {
            'class': 'lobibox-btn lobibox-btn-no',
            text: 'No',
            closeOnClick: true
        }
    }
};


//Overriding default options
Lobibox.base.OPTIONS = $.extend({}, Lobibox.base.OPTIONS, {
    ... //override any options except those above which is written "DO NOT change"
});

title           : 'Question',
width           : 500,
iconClass       : 'glyphicon glyphicon-question-sign'

//Overriding default options
Lobibox.confirm.DEFAULTS = $.extend({}, Lobibox.confirm.DEFAULTS, {
    ... //override any options from default options
});

width: 400,
attrs : {},         // Plain object of any valid attribute of input field
value: '',          // Value which is given to textfield when messagebox is created
multiline: false,   // Set this true for multiline prompt
lines: 3,           // This works only for multiline prompt. Number of lines
type: 'text',       // Prompt type. Available types (text|number|color)
label: ''           // Set some text which will be shown exactly on top of textfield

//Overriding default options
Lobibox.prompt.DEFAULTS = $.extend({}, Lobibox.prompt.DEFAULTS, {
    ... //override any options from default options
});

Lobibox.alert.DEFAULTS = {
    warning: {
        title: 'Warning',
        iconClass: 'glyphicon glyphicon-question-sign' // Change warning alert icon globally 
    },
    info:{
        title: 'Information',
        iconClass: 'glyphicon glyphicon-info-sign'  // Change info alert icon globally 
    },
    success: {
        title: 'Success',
        iconClass: 'glyphicon glyphicon-ok-sign'  // Change success alert icon globally 
    },
    error: {
        title: 'Error',
        iconClass: 'glyphicon glyphicon-remove-sign'  // Change error alert icon globally 
    }
};

//Overriding default options
Lobibox.alert.DEFAULTS = $.extend({}, Lobibox.alert.DEFAULTS, {
    ... //override any options from default options
});

width               : 500,
showProgressLabel   : true,     // Show percentage of progress
label               : '',       // Show progress label
progressTpl         : false,    //Template of progress bar
<!-- You can use bootstrap progress bar by correct template -->
<!-- FOR EXAMPLE -->
<!-- This element must have class "lobibox-progress-outer" -->
<div class="progress lobibox-progress-outer">
    <!-- This element must have class "lobibox-progress-element" -->
    <div class="progress-bar progress-bar-danger progress-bar-striped lobibox-progress-element" data-role="progress-text" role="progressbar"></div>
</div>

//Overriding default options
Lobibox.progress.DEFAULTS = $.extend({}, Lobibox.progress.DEFAULTS, {
    ... //override any options from default options
});


                            

width           : 480,
height          : 600,
content         : '',       // HTML Content of window
url             : '',       // URL which will be used to load content
draggable       : true,     // Override default option
autoload        : true,     // Auto load from given url when window is created
loadMethod      : 'GET',    // Ajax method to load content
showAfterLoad   : true,     // Show window after content is loaded or show and then load content
params          : {}        // Parameters which will be send by ajax for loading content

//Overriding default options
Lobibox.window.DEFAULTS = $.extend({}, Lobibox.window.DEFAULTS, {
    ... //override any options from default options
});

// 1. Save the instance in variable when showing messagebox
var lobibox = Lobibox.confirm({
    msg         : "Are you sure you want to delete this user?"
});
// 2. Or you can select the lobibox message element and get instance by data attribute
var lobibox = $('.lobibox-confirm').data('lobibox');

// And you can call any avaiable method
lobibox.hide();
lobibox.show();
lobibox.setWidth(600);
lobibox.setPosition(200, 400);
lobibox.setTitle('New title');

Lobibox.alert('info', {
    onShow: function(lobibox){
        
    }
});

Lobibox.notify(
    'warning',  // Available types 'warning', 'info', 'success', 'error'
    {
        ...
    }
);    

title: true,                // Title of notification. Do not include it for default title or set custom string. Set this false to disable title
size: 'normal',             // normal, mini, large
showClass: 'flipInX',       // Show animation class. (Uses animate.css)
hideClass: 'zoomOutDown',   // Hide animation class (Uses animate.css)
icon: true,                 // Icon of notification. Leave as is for default icon or set custom string
msg: '',                    // Message of notification
img: null,                  // Image source string
closable: true,             // Make notifications closable
delay: 5000,                // Hide notification after this time (in miliseconds)
delayIndicator: true,       // Show timer indicator
closeOnClick: true,         // Close notifications by clicking on them
width: 400,                 // Width of notification box
sound: true,                // Sound of notification. Set this false to disable sound. Leave as is for default sound or set custom soud path
position: "bottom right"    // Place to show notification. Available options: "top left", "top right", "bottom left", "bottom right"        

//Overriding default options
Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
    ... //override any options from default options
});

Lobibox.notify.OPTIONS = {
    'class': 'animated-fast',
    soundPath: 'src/sounds/',
//You can override options for large notifications from here
    large: {
        width: 500
    },
//You can override options for small notifications from here
    mini: {
        'class': 'notify-mini'
    },
//Default options of different style notifications
    success: {
        'class': 'lobibox-notify-success',
        'title': 'Success',
        'icon': 'glyphicon glyphicon-ok-sign',
        sound: 'sound2.mp3'
    },
    error: {
        'class': 'lobibox-notify-error',
        'title': 'Error',
        'icon': 'glyphicon glyphicon-remove-sign',
        sound: 'sound4.mp3'
    },
    warning: {
        'class': 'lobibox-notify-warning',
        'title': 'Warning',
        'icon': 'glyphicon glyphicon-exclamation-sign',
        sound: 'sound5.mp3'
    },
    info: {
        'class': 'lobibox-notify-info',
        'title': 'Information',
        'icon': 'glyphicon glyphicon-info-sign',
        sound: 'sound6.mp3'
    }
};   

//Overriding default options
Lobibox.notify.OPTIONS = $.extend({}, Lobibox.notify.OPTIONS, {
    ... //override any options from default options
});