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)

License

MIT-style license

Download

AscribeDialog.zip (157KB)

Requirements

Tested to work

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.

MeetMeNow 14-day free trial; easy web meetings
Ascribe integrates both member & website management into a single, powerful web-based solution. Empower ministries with online tools to manage information, assign tasks, send email & build community.

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