Find all current special offers on Adobe products - Mootools Essentials: A Mootools Cookbook

# Ascribe Dialog

## This javascript class allows you to add an in-browser DHTML popup, tooltip or dialog (modal or non-modal) to your page.

## Fly or fade in

Using the MooTools JavaScript framework, dialogs are animated to either fly in or fade in.

## Make it modal

You can set the dialog to be modal. In modal mode, the mask is created, the size of which is updated upon window resize. Mask opacity and color can be set in the options.

The mask is normally created with a div but for Internet Explorer it uses an IFRAME to cover over a SELECT form element (notice the SELECT tag below as an example). I don't know how to set the color of the IFRAME in IE. Perhaps the IFRAME needs to reference an actual SRC? I'm open to suggestions. I'm also having trouble getting IE to respond to ESC onkeyup in the window to hide the dialog.

#### Code example

    var modal = new AscModal('modal dialog text goes here', 'n');
    $('test_modal').addEvent('click', function(e) {
    	if(e) e = new Event(e).stop();
    	modal.show();
    });

## Use it as a tooltip with arrows

Arrows are incomaptible with IE6.

Mouseover this. Tip will fly in from which ever side of the element has more visible space and fade upon mouseleave.

#### Code example

    var tooltip1 = new AscTip($('tip_example'), 'Tooltip text');

## Targeting system

You can target the placement of the popup to the browser window or to a particular element on the page. Plus you can easily target where you want the popup to appear in relation to that element or the window.

The modal example above targets the center of the window (no matter how far down the page is scrolled).

### Change any of these settings to test the class

| show start | show end | hide end
--- | --- | --- | ---
Transition |  |  |
Target |  |  |
Inside/Outside |  |  |
Align |  |  |
Offset (in pixels) |  |  |
Margin (in pixels) |  |  |
Use arrows
Is modal

## License

MIT-style license

## Download

AscribeDialog.zip (157KB)

## Requirements

- MooTools 1.11
- XHTML Doctype as required by Mootools Window.Size.js

## Tested to work

- Firefox 2 (Win XP SP2)
- Internet Explorer 6 (Win XP SP2)
- Safari (Win XP SP2)

## Acknowledgements

Based on Simple class for modal dialog boxes using 1.2b2. Some inspiration from ExtJS's message box.

## Comments

Please feel free to comment on this class at the Mootools forum post.

By Ascribe Data Systems LLC
Created by Truman Leung
First released: April 15, 2008