JS Plugin: Select2 3.0
Elements Design: Free Icons

JS Plugin: Dreamylitebox


"This a super simple multipurpose jQuery lite box. You can use it as an alert popup, a confirm box, a prompt box, a wait popup or modal window. Using the default buttons, your custom buttons or none."


Resource: Dreamylitebox

Resource: Dreamylitebox

Code - Alert
    msg:'Alert! Alert! Alert!'

Code - Confirm
$('.msg-confirm').dreamyLiteBox({type:'confirm',msg:'This is a confirm message and has some callback', title: false,
    callbackOnCancel: function(){
        document.getElementById('writeHere').innerHTML += 'You cancel. <br>';
    callbackOnOpen: function(){
        document.getElementById('writeHere').innerHTML += 'You open the confirm box. <br>';

Code - Prompt
    msg:'Write something',

Code - Wait
    msg:'Please wait',
    callbackOnOpen: function(){
        document.getElementById('writeHere').innerHTML += 'The wait start. <br>';
    callbackOnClose: function(){
        document.getElementById('writeHere').innerHTML += 'The wait end. <br>';

Code - Modal
    msg:'This is a simple <strong>modal window</strong> with some <em>HTML</em>.'

Code - Modal using an element

Code - custom buttons
    msg:'This is a modal with custom buttons',
    buttons: {
        'A custom buttom': function() {
            document.getElementById('writeHere').innerHTML += 'you press your button.<br>';
        'A custom cancel button': function() {


- type: 'modal', // String with the type of the message(alert, confirm, prompt, wait, modal).
- event: 'click', // click & hover are allowed. "Manual" to manually open the litebox.
- title: true, // Add a title to the lite box. False: no title, True: button/link value/text, String: title text.
- msg: false, //String(HTML or just text) or jQuery object with the content for the message.
- buttons: null, // Add extra buttons as an object where the key is the label and the value the callback: // {'myButton': function(){doSomething()}} // For close the lite box you must add the close method to the callback like this: // {'myButton': function(){doSomething();$(this).dreamyLiteBox('close')}}
- useDefaultBtns: true, // Use the defaults buttons
- bg: true, // Whaterver to use background or not
- bgColor: "#000", // Background color of the background layer
- useDefaultSizeType: true, // Boolean to use the default size for each type
- width: 530, // Number for a custom with. Optional, if is  use a default value.
- height: 150, //Number for a custom height. Optional, if is undefined use a default value.
- callbackOnConfirm: null, // Callback used only for the confirm and prompt messages, with the function to call after confirm the message.
- callbackOnCancel: null, // Callback used only for the confirm and prompt messages, with the function to call after cancel the message.
- callbackOnOpen: null, // Callback for appear function
- callbackOnClose: null, // Callback for disappear function
- callbackBeforeOpen: null, // Callback before open the lite box
- callbackBeforeClose: null // Callback before close the lite box


Tags: plugin, jquery, modal, wait, buttons, custom, develop. internet, css3, html, layout

Leave a Comment

No Comment

© Creative3x Ltd.