Using the MooTools JavaScript framework, dialogs are animated to either fly in or fade in.
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.
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(); });
Arrows are incomaptible with IE6.
var tooltip1 = new AscTip($('tip_example'), 'Tooltip text');
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).
show start | show end | hide end | |
---|---|---|---|
Transition | |||
Target | |||
Inside/Outside | |||
Align | |||
Offset (in pixels) | |||
Margin (in pixels) | |||
AscribeDialog.zip (157KB)
Based on Simple class for modal dialog boxes using 1.2b2. Some inspiration from ExtJS's message box.
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