Overview

Class msgBox is a simple, unobtrusive script used to display messages. It's a snap to setup and works on all modern browsers. Class msgBox clone the functions original of JavaScript 'alert' ,'confirm' and 'prompt'.If you wish to send e-mail this class come with an additional function called 'contact'. call: msgBox().contact({name:name_box});

Options


Example


Check this out









How to Use


Easy install

  1. Add the following anywhere in your website:
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="msgBox.js"></script>
  2. Add the following anywhere in your website:
    <link type="text/css" href="style.css" /> 
    <link type="text/css" href="contact.css" />

Advanced


Check this out

<style>
#name+'-Box'{....css....}
#name+'-InBox'{....css....}
#name+'-ContentBox'{....css....}
</style>

<script>
window.addEvent('domready',function(){
.....
//you choice a name for box
new msgBox({name:name_box,[options]}).alert(string,[options]);
new msgBox({name:name_box,[options]}).confirm(string,[options]);
new msgBox({name:name_box,[options]}).prompt(string,string,[options]);
new msgBox({name:name_box,[options]}).contact();
.....
});
<script>

options for Box:
txtBoxBtnOk - string name of button Ok
txtBoxBtnCancel - string name of button cancel
onComplete - class.empty => a function that executs when onReturnFunction 
is called and return a string
$('a').addEvent('click',function(){new msgBox(
{name: 'DEV1'}).alert('Hello JavaScript',
{ txtBoxBtnOk: 'OK',onComplete: function(output)
{alert('Output: '+output)} } );});

$('b').addEvent('click',function(){new msgBox(
{name: 'DEV2',BoxStyles:{'width': 300} }).confirm('Would 
you like?',{ onComplete: function(output)
{alert('Output: '+output)} } );});

$('c').addEvent('click',function(){new msgBox({
name: 'DEV2',BoxStyles:{'width': 300} }).prompt('You did enjoy?'
,'Your answer is...',{ onComplete: function(output)
{alert('Output: '+output)} } );});

$("d").addEvent('click',function(){
var contact = new msgBox({name: 'DEV3'}).contact({onComplete: 
function(output){alert('output: '+output)} });});


Download

Changelog


Support

I don't see any difference before and after adding the script.Firstly, make sure you've actually applied some styles for the FancyForm classes (see How to use).If you have any other JavaScript on your site, check if you're getting any Javascript errors. If there is an error, it may give you an indication about where the conflict is occurring.

Browser compatibily

The script itself is free. You may use it in any way you wish, as long as proper attribution is provided. A link to my site would be appreciated.Got another question? I'm all ears.


Contact

If you’re contacting me with a technical question, please include any relevant code (preferably as a file attachment) and take a few minutes to make sure you’ve framed the question as best you can.

Name:
Subject:
From:
Message: