Modal Dialog System

A minimalist modal dialog system.

alert confirm


This package contains a basic CSS skin (mdialog.css) and two themes (blue.css and dark.css). Load them from your web page:

  <link rel="stylesheet" href="packages/mdialog/css/mdialog.css">
  <link rel="stylesheet" href="packages/mdialog/css/themes/dark.css">


import 'package:mdialog/mdialog.dart';

main() async {
  await alert('We will proceed to format the Hard Disk');
  print('Ok, you\'ve been alerted');

  if (await confirm('Are you sure?')) {
    print('Formating Hard Disk ...');

Create custom dialogs

The library provides two classes to create custom modal dialogs: ModalWindow and ModalBlock. The following code creates a modal loading interface.

import 'dart:html';
import 'package:mdialog/mdialog.dart';

class ModalLoading {
  final _modalWindow = new ModalWindow();

  ModalLoading() {
    _modalWindow.add(new ModalBlock('header')..text = 'Loading request');
    _modalWindow.add(new ModalBlock('body')..text = 'Please wait ...');;

  void close() => _modalWindow.close();

main() async {
  final loading = new ModalLoading();

  try {
    await HttpRequest.getString('');
  } catch (e) {
    await alert('Error processing the request');
  } finally {

Features and bugs

Please file feature requests and bugs at the Issue Tracker.


Provides a set of modal window functions and classes.