newsscroller nextnews resume previousnews
 

MOOMESSAGEBOX

highly customizable messageboxes with the mootools framework

SHORT DESCRIPTION:

BASIC INFORMATION:

If you want to display a customized image box like a lightbox and not a real message box from your system, then use this simple to integrate message box class for mootools.

You can define serveral parameters from bg-color, background imge, rounded corners ( if wanted ), amount of buttons, button text, width and height, show delay time etc. The box can even hold html code and / or images.

COMPATIBILITY

This box has been tested with Internet Explorer 6/7, Firefox 2.0.0.14, Opera 9.2 and Apple Safari for Windows

BASIC STEPS

Copy moomessagebox12.js ( or equivalent for 1.1 version ) to your js folder in your website root. Now copy all images into your root document or change the links inside the moomessagebox12.js file. Copy the ajax.js to your js folder ( mootools framework ).

 

HTML SETUP STEPS

Open the page you want mooMessageBox to be used on. Now add these lines to the head section of your site:

  1. <head>
  2. <script language="javascript" type="text/ecmascript" src="js/ajax.js"></script>
  3. <script language="javascript" type="text/ecmascript" src="js/moomessagebox12.js"></script>
  4. </head>

Now add a DIV that holds the contents you wish to display inside the messagebox into your document, i.e. like this:

<div id="myDiv">
<h3>Messagebox with mootools</h3>
<p>This is a messagebox - add content to it. Images, HTML or whatever comes to your mind</p>
</div>

AJAX SETUP STEPS

Right before the closing </body> tag, add the follwing line:

var p = new mooSimpleBox ({ width :430, height :350, closeBtn :'myBtn', btnTitle : 'close', boxClass :'myBox', cid :'myID', fadeSpeed :500, opacity :'0.9', addContentID :'myDiv', boxTitle :'artViper messageBox', isDrag :'true'});

 

To make the box work you'll need to add some functionality to the links that fire the events to show the box. Add a link to your page and apply the ID 'showBox'.

$('showBox').addEvent('click',function(e){ e = new Event(e).stop(); p.fadeIn(); })

 

BOX VARIABLES

Here is the explanation of the different variables you can set:

  1. new mooSimpleBox({ options }); - create a new box
  2. height - define the height of the box
  3. width - define the width of the box
  4. closeBtn - define a close button, which will close the box later on
  5. btnTitle - add a title for the button
  6. boxClass - the CSS class you want to apply to the box
  7. fadeSpeed - show|hide speed in ms
  8. id - the id of the DIV with your messagebox content
  9. opacity - how much transparency the box should have
  10. addContentID - add contents from this DIV id
  11. boxTitle - as the name says
  12. isDrag - true|false, make the box draggable

DOWNLOADS

This script is available in different versions and / or for different systems. Please choose the appropriate version:

Download versions:

for mootools 1.1 Download
for motools 1.2 Get version 1.2

 

ADDITIONAL INFO

Download manual (PDF)
View FAQ's

If you want to write a plugin for your own system or any system that isn't listed here, we'd be happy if you could drop us a copy so we can add it here.

 

QUESTIONS?

If you need help integrating this script or simply have a question, then feel free to drop us a line here >>

 We develop AJAX | mySQL | PHP integrated systems, shop addons ( XT:Commerce, OSCommerce ), Javascript and AJAX widgets and many more.
Simply request a quote for your upcoming project.

Interesting Links

Latest Blog Entries

Latest Shop Additions

  • XT Remember Bank Information
  • XT Price to Image
  • XT Search TagCloud