Places

 

  • Download
  • Documentation
  • Forums
  • Demo
  • Contact
  • Blog
  • My account

Meteora

Javascript Widgets

Controls

  • Autocomplete
  • Bubble
  • Calendar
  • Carousel
  • Datagrid
  • Dialog
  • Editor
  • Filebrowser
  • Form Control
  • Menu
  • Notebook
  • Picbox
  • Popup
  • Searchlist
  • Selection
  • Spinbutton
  • Tablesort
  • Toolbox
  • Treeview

Features

  • JsonRpc Core

Effects

  • Visual effects

Control.Dialog

Before proceeding you may want to read our getting started page.

What does this control do?

This control can be used to create custom modal windows. You can also use one of our predefined dialogs such as those we use to replace the ugly-by-default alert() or prompt() calls.

How to use

In order to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Control.Dialog');

You may then be able to invoke any of our predefined Dialog such as Dialog.alert(), Dialog.prompt() or Dialog.question().

Dialog.alert(
  'This is an emergent message.',
  {
    'title': 'Dialog title'
  }
);

Dialog.prompt(
  'What is your name?',
  {
    'title': 'Dialog title',
    'onOk': function(dialog) {
     
      var yourName = this.value;
      myNameIs(yourName);

      dialog.close();
    }
  }
);

Dialog.question(
  'Are you sure?',
  {
    'title': 'Dialog title',
    'onYes': function(dialog) {
      YesIAmSure();
      dialog.close();
    },
    'onNo': function(dialog) {
      noIAmNot();
      dialog.close();
    }
  }
);

This is a classic dialog using common form elements expecting for user interaction:

var dialog = new Dialog(
 
  // CONTENT
  // You can use some text or an HTML element's reference
  'Dialog inner content',

  // OPTIONS
  {
    // WINDOW'S TITLE
    'title': 'Dialog title',
   
    // FORM BUTTONS
    'buttons': {
     
      // Cancel button
      'buttonCancel': {
        'caption': 'Cancel',
        'onClick': function(dialog) {
          dialog.close();
        }
      },

      // OK button
      'buttonOk': {
        'caption': 'OK',
        // This is the default button
        'default': true,
        'onClick': function(dialog) {
          dialog.close();
        }
      }

      // You can continue adding buttons if you want

    }
  }
);

// Centering the dialog
dialog.center();
dialog.show();

If you want to create a complete customized dialog, you can pass an HTML element's reference to the contructor:

new Dialog(HTMLElementReference);

Methods

center()

The dialog will appear right at the center of the screen.

top(x)

Move the dialog x pixels from the top of the browser's window.

left(x)

Move the dialog x pixels from the left of the browser's window.

right(x)

Move the dialog x pixels from the right of the browser's window.

bottom(x)

Move the dialog x pixels from the botton of the browser's window.

moveTo(x, y)

Move the dialog x pixels from the top and y from the left of the browser's window.

resizeTo(x, y)

Changes the size of the modal window to x (width) and y (height).

focus()

Sets the modal window as active.

blur()

Sets the modal window as inactive.

hide()

Hides the modal window.

show()

Shows the modal window.

close()

Destroys the modal window and removes all its contents from memory.

setTitle(s)

Changes the title of the modal window to s.

setContent(c)

Sets the content of the modal window to c (text string, HTML string or HTML element's reference).

Powered by textmotion

(c) 2008 Astrata Software