Quick start

JS+ Dialog is developed on object oriented style and this page contains all information about classes, definitions and methods.

The all public API is placed inside global JSDialog object. Use it to create and call dialogs.

JSDialog.Config stores global dialog parameters (like skin), use it to preconfigure the library.

If you need to licalize the dialogs set values of JSDialog.Lang before usage of JSDialog.

Message dialogs

This simple code will call information message by click on button:

JSDialog.showMessageDialog("Hello, world");

This is the code to show multiline warning message and pass the function to handle close event:

JSDialog.showMessageDialog(
    "Create dialogs with ease!\nUse JS+ Dialog", 
    "warning",
    function() {
        // Your code goes here
    }
);

The full list of parameters can be found in API: Messages dialogs. Also see Messages Demo page to find out more samples.

Confirmation dialogs

Configrmation dialogs are called with JSDialog.showConfirmationDialog function and its usage is similar with message dialogs.

You need to define buttons and optionally their titles and function to handle the result. Result of this function will be yes, no or cancel string even if you use alternative buttons (for example accept and decline or change their titles).

The callback function has the only parameter: result (string).

JSDialog.showConfirmationDialog(
    "Are you sure you want to continue?",
    function(result) {
        // result: "yes", "no" or "cancel"
    },
    "warning",
    "yes:Yes, sure!|no|cancel"
);

As you can see this dialog has redefined title for "Yes" button.

Please see API: confirmation dialogs for details and Confirmations Demo page for more examples.

Custom dialogs

You can create your own windows with this library. For this purposes we have a methor for creating custom windows. In fact this is the mail method of JSDialog object: information and confirmation dialogs functions just call it with there own parameters.

See how easy to create the dialog:

JSDialog.create(
    {
        elementId: 'btnId',
        title: 'My custom dialog',
        contents: '<p>My custom text</p>',
        onOk: function() { console.log('OK'); }
    }
); 

Any manipulations are available for such types of window. You can pass any HTML content for the dialog in contents parameter and attach any listeners for example in onFirstShow parameter. For buttons you can set individual functions or use default one (for "OK"/"Cancel" buttons).

Full documentation for this method is here: API: creating custom dialogs.
Full list of parameters: API: parameters for JSDialog.create
More samples and demos for custom modal dialogs.