mooMessagebox

www.artviper.net/mooMessageBox.php

highly customizable message boxes with the mootools framework

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.

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

Calling a box is pretty easy, just write the following:

var p = new mooSimpleBox({ width:430, height:350, closeBtn:'myBtn', btnTitle: 'close',boxClass:'myBox', id:'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:

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

artViper mooMessageBox

This is a simple and plain messagebox class based on mootools, its content comes from a div that you specify. As you can see, you can integrate any kind of html into the box. You can define a lot of things to make your box look the way you want:

  • width and height
  • attach a CSS class
  • add a button and its caption
  • add a title bar and its caption
  • define the additional <div> with contents
  • define the fade speed of the box
  • define the opacity
  • make the box draggable

Click me, I'm a demo

hide me again

Download

If you like this snippet, then feel free to download the full package here: ( right click, save as )... please note, that you need mootools framework version 1.11 to run this.
mooMessageBox Download

NEW

mooMessageBox for mootools 1.2 - download here

 

 

Surftipps