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.

Use it as a tooltip with arrows

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');

Mouseover the boxes below to test multiple tooltips for fine-tuned targeting when the targeted object is smaller than the tooltip

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.tar.gz

AscribeDialog.zip

Requirements

Acknowledgements

Based on Simple class for modal dialog boxes using 1.2b2 once shared in the old MooTools forum. Some inspiration from ExtJS's message box.

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
Second release: October 9, 2010