OOUI/Windows/Message Dialogs

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

Unlike the other types of dialogs, message dialogs, which generally contain either a confirmation or alert notification, behave in such a generic way that they can be instantiated directly. By default, the rendered dialog box consists of

• a header with the dialog title,
• a message,
• a footer that contains any action widgets.

In the case of a confirmation message, the title describes what the selected action will do. In the case of an alert, the title describes what event occurred. A confirmation message provides more details about the consequences of the selected action; an alert message, more information about why the event occurred.

For simple use cases, several convenience functions exist. See OOUI/Windows/Simple messages.

Basic example

The basic MessageDialog class specifies two actions: ‘accept’, the primary action (e.g., ‘OK’) and ‘reject,’ the safe action (e.g., ‘cancel’). Both will close the window, passing along the selected action.

// Example: Creating and opening a message dialog window.
var messageDialog = new OO.ui.MessageDialog();

// Create and append a window manager.
var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );

// Add the dialog to the window manager.
windowManager.addWindows( [ messageDialog ] );

// Configure the message dialog when it is opened with the window manager's openWindow() method.
windowManager.openWindow( messageDialog, {
  title: 'Basic message dialog',
  message: 'With a \'title\' and \'message\' '
} );

Custom action buttons

When the window is opened with the window manager’s openWindow(), a new action set can also be passed to the window. The following example illustrates a message dialog with a single action labeled ‘Dismiss.’ The action itself is ‘accept’, defined by the class.

// Example: Customize the displayed actions at the time the window is opened.
var messageDialog = new OO.ui.MessageDialog();

// Create and append a window manager.
var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );

// Add the dialog to the window manager.
windowManager.addWindows( [ messageDialog ] );

// Configure the message dialog when it is opened with the window manager's openWindow() method.
windowManager.openWindow( messageDialog, {
  title: 'Storage limit reached',
  message: 'You are out of disk space',
  actions: [
    {
      action: 'accept',
      label: 'Dismiss',
      flags: 'primary'
    }
  ]
});

The message dialog will automatically display all actions in a single row at the bottom of the dialog box, unless the labels are too long to fit without overflow, in which case the actions will be displayed on separate rows:

Verbose styling

For long messages, use the verbose option to left-align and adjust the message styling:

// Use the verbose option to communicate a long message.
var messageDialog = new OO.ui.MessageDialog();

// Create and append window manager
var windowManager = new OO.ui.WindowManager();
$( 'body' ).append( windowManager.$element );

// Add the dialog to the window manager
windowManager.addWindows( [ messageDialog ] );

// Configure the message dialog when it is opened with the window manager’s openWindow() method.
windowManager.openWindow( messageDialog, {
  title: 'Storage limit reached',
  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis laoreet elit. Nam eu velit ullamcorper, volutpat elit sed, viverra massa. Aenean congue aliquam lorem, et laoreet risus condimentum vel. Praesent nec imperdiet mauris. Nunc eros magna, iaculis sit amet ante id, dapibus tristique lorem. Praesent in feugiat lorem, sit amet porttitor eros. Donec sapien turpis, pretium eget ligula id, scelerisque tincidunt diam. Pellentesque a venenatis tortor, at luctus nisl. Quisque vel urna a enim mattis rutrum. Morbi eget consequat nisl. Nam tristique molestie diam ac consequat. Nam varius adipiscing mattis. Praesent sodales volutpat nulla lobortis iaculis. Quisque vel odio eget diam posuere imperdiet. Fusce et iaculis odio. Donec in nibh ut dui accumsan vehicula quis et massa.',
  verbose: true,
  actions: [
    {
      action: 'accept',
      label: 'Dismiss',
      flags: 'primary'
    }
  ]
});

Adding Dependency

The dependencies 'oojs-ui-core' and 'oojs-ui-windows' should be added to the relevant section in the Resources.php

eg:

If you are adding the message dialog to the mediawiki.special.movePage.js

'mediawiki.special.movePage' => [
    'scripts' => 'resources/src/mediawiki.special/mediawiki.special.movePage.js',
    'dependencies' => [
        'jquery.byteLimit',
        'mediawiki.widgets',
        'oojs-ui-core',
        'oojs-ui-windows'
    ],
],

For a full list of supported methods and configuration options, please see the code-level documentation.