OOUI/Windows/Simple messages

From MediaWiki.org
< OOUI‎ | Windows
Jump to navigation Jump to 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" to simply close the dialog. It's also closing by pressing Esc. See complete documentation.

OOjs UI alert dialog.png

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

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.

OOjs UI confirmation dialog.png

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.' );
    }
} );

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.

OOjs UI prompt dialog.png

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.' );
    }
} );