OOUI/Windows/Simple messages

From MediaWiki.org
< OOUI‎ | Windows
Jump to: navigation, search

A few convenience functions exist to display a quick message or question dialog, without having to set up a MessageDialog and WindowManager and other boilerplate.

For all the dialogs some additional options, such as title, can be passed in the second parameter. If you need more flexibility, you should extend the MessageDialog class.

Alert dialog[edit]

OO.ui.alert displays a quick modal alert dialog. The dialog has only one action button, labelled "OK", clicking it will simply close the dialog. See complete documentation.

OO.ui.alert( 'Something happened!' ).done( function () {
    console.log( 'User closed the dialog.' );
} );

OOjs UI alert dialog.png

Confirmation dialog[edit]

OO.ui.confirm displays a quick modal confirmation dialog. The dialog has two action buttons, one to confirm an operation (labelled "OK") and one to cancel it (labelled "Cancel"). See complete documentation.

OO.ui.confirm( 'Are you sure?' ).done( function ( confirmed ) {
    if ( confirmed ) {
        console.log( 'User clicked "OK"!' );
    } else {
        console.log( 'User clicked "Cancel" or closed the dialog.' );
    }
} );

OOjs UI confirmation dialog.png

Prompt dialog[edit]

OO.ui.prompt display a quick prompt dialog. The dialog has a text input widget and two action buttons, one to confirm an operation (labelled "OK") and one to cancel it (labelled "Cancel"). See complete documentation.

Configuration options for the text input, such as placeholder or value can be passed in the textInput config parameter.

OO.ui.prompt( 'Choose a line to go to', { textInput: { placeholder: 'Line number' } } ).done( function ( result ) {
    if ( result !== null ) {
        console.log( 'User typed "' + result + '" then clicked "OK".' );
    } else {
        console.log( 'User clicked "Cancel" or closed the dialog.' );
    }
} );

OOjs UI prompt dialog.png