Component usage

You can have maximum one dialog box opened at once.

    $(document).ready(function(){
        $.Dialog({
            'title'       : 'My dialog title',
            'content'     : 'HTML content',
            'draggable'   : true,
            'overlay'     : true,
            'closeButton' : true,
            'buttonsAlign': 'right',
            'keepOpened'  : true,
            'position'    : {
                'zone'    : 'right'
            },
            'buttons'     : {
                'button1'     : {
                    'action': function(){}
                },
                'button2'     : {
                    'action': function(){}
                }
            }
        });
    });

Params

  • title - Title of the dialog box (HTML format)
  • content - Content of the dialog box (HTML format)
  • draggable - Set draggable to dialog box, available: true, false (default: false)
  • overlay - Set the overlay of the page (false will only remove the effect, not the div), available: true, false (default: true)
  • closeButton - Enable or disable the close button, available: true, false (default: false)
  • buttonsAlign - Align of the buttons, available: left, center, right (default: center)
  • keepOpened - Keep the window opened after buttons click, available: true, false (default: false)
  • buttons - Set buttons in the action bar (JSON format)
    • name - Text of the button (JSON format)
      • action - Function to bind to the button
  • position - Set the initial position of the dialog box (JSON format)
    • zone - Zone of the dialog box, available: left, center, right (default: center)
    • offsetY - Top offset pixels
    • offsetX - Left offset pixels

API

  • $.Dialog.content() - Getter or setter for the content of opened dialog (HTML format)
  • $.Dialog.title() - Getter or setter for the title of opened dialog (HTML format)
  • $.Dialog.buttons() - Setter for the buttons of opened dialog (JSON Format)
  • $.Dialog.close() - Close, if any, current dialog box

Javascript

Include in head dialog.js