Delphi-like MessageDlg in Javascript with jQuery

As you may already know, the good old MessageDlg function in Delphi is not available for web applications, so you're done to a few options:

• use some third party "plugin"
• use jQuery-UI dialog
• create your own

I've created my own MessageDlg function that is very close to the Delphi function, however, the dependencies are jQuery and jQuery UI

function MessageDlg( text, type, buttons, callback ) {
  /* code */
}

where

• text: text to be displayed
• type: dialog type, i.e. Information, Confirmation, Warning, Error
• buttons: array of button types to be added on the dialog, ala delphi, i.e. [mbOK, mbYes, mbNo]
• callback: function to be called when the user clicks a button, the function gets a integer parameter passed which is equal to the button type, i.e. mbOK = mrOK

Here's the code: filename.js

// MessageDlg types
var mtInformation = 0;
var mtConfirmation = 1;
var mtWarning = 2;
var mtError = 3;

// MessageDlg type classes, used for icons
var MessageDlgTypes = [
 { type: mtInformation, iconClass: "icon-information" },
 { type: mtConfirmation, iconClass: "icon-confirmation" },
 { type: mtWarning, iconClass: "icon-warning" },
 { type: mtError, iconClass: "icon-error" }
];

function getMsgDlgIcon( type ) {
 var index;
 var result;
 for ( index = 0; index < MessageDlgTypes.length; index++ ) {
  if ( MessageDlgTypes[ index ].type == type ) {
   result = MessageDlgTypes[ index ].iconClass;
   break;
  }
 }
 return result;
}

// string, holds all icon classes for removal before applying a new icon
var MessageDlgIconClasses = "";

function buildMsgDlgIconClasses() {
 var index;
 for ( index = 0; index < MessageDlgTypes.length; index++ ) {
  MessageDlgIconClasses += " " + MessageDlgTypes[ index ].iconClass;
 }
}

buildMsgDlgIconClasses();

// helper function to itrate all message dialog types
function forEachMsgDlgType( callback ) {
 var index;
 for ( index = 0; index < MessageDlgTypes.length; index++ ) {
  callback( MessageDlgTypes[ index ] );
 }
}

// MessageDlg button types
var mbOK = 0
var mbYes = 1;
var mbNo = 2;
var mbCancel = 3;
var mbAbort = 4;
var mbIgnore = 5;

// MessageDlg return types, passed in callback function if provided
var mrOK = mbOK;
var mrYes = mbYes;
var mrNo = mbNo;
var mrCancel = mbCancel;
var mrAbort = mbAbort;
var mrIgnore = mbIgnore;

/*
 MessageDlg button type localization
 @type: direct relationship with button types
 @caption: button caption(text)
 @accessKey: accelerator, ALT+KEY in stead of using mouse, i.e. ALT+Y for [&Yes]
*/
var MessageDlgBtnExtInfo = [
 { type: mbOK, caption: "OK", accessKey: "O" },
 { type: mbYes, caption: "Yes", accessKey: "Y" },
 { type: mbNo, caption: "No", accessKey: "N" },
 { type: mbCancel, caption: "Cancel", accessKey: "C" },
 { type: mbAbort, caption: "Abort", accessKey: "A" },
 { type: mbIgnore, caption: "Ignore", accessKey: "I" }
];

/*
 each time you call MessageDlg,
 callback parameter will be assigned to this variable
*/
var MessageDlgTempCallback;

// called each time a button is clicked
function MessageDlgOnClick( button ) {
 // hide dialog
 $( "#messagedlg .outter-wrapper" ).hide( "slide", { direction: "up" }, function() {
  $( "#messagedlg" ).hide();
  // check if we can call back
  if ( typeof MessageDlgTempCallback != "undefined" ) {
   MessageDlgTempCallback( button );
  }
 });
}

function getMsgDlgBtnInfo( type ) {
 var index;
 var result;
 for ( index = 0; index < MessageDlgBtnExtInfo.length; index++ ) {
  if ( MessageDlgBtnExtInfo[ index ].type == type ) {
   result = MessageDlgBtnExtInfo[ index ];
   break;
  }
 }
 return result;
}

/*
 @text: string -> text or html
 @type: integer -> mtInformation..mtError
 @buttons: array of integer -> mbYes...mbIgnore
 @callback: function( integer ) -> called when user clicks a button passing the message result as first param
*/
function MessageDlg( text, type, buttons, callback ) {
 // append elements to body if it doesn't exist yet
 if ( ! $( "#messagedlg" )[ 0 ] ) {
  $( "body" ).prepend(
   "<div id=\"messagedlg\" class=\"messagedlg\">\
    <div class=\"outter-wrapper\">\
     <div class=\"message-wrapper\">\
      <div class=\"message-icon\"></div>\
      <div class=\"message-text\"></div>\
     </div>\
     <div class=\"buttons \"></div>\
    </div>\
   </div>"
  );
 }
 // check parameters
 if ( typeof type == "undefined" || typeof buttons == "undefined" ) {
  throw "MessageDlg: type and buttons must be defined!";
 }
 // we want only array instance to be passed in buttons parameter
 if ( ! buttons instanceof Array ) {
  throw "MessageDlg: buttons parameter must be array!";
 }
 // save callback
 MessageDlgTempCallback = callback;
 // create buttons
 var index;
 var button;
 var temp = "";
 var btnInfo;
 for ( index = 0; index< buttons.length; index++ ) {
  button = buttons[ index ];
  btnInfo = getMsgDlgBtnInfo( button );
  temp += "<button onclick=\"MessageDlgOnClick( " + button + ");\" accesskey=\"" + btnInfo.accessKey + "\">" + btnInfo.caption + "</button>";
 }
 $( "#messagedlg .message-icon" )
  .removeClass( MessageDlgIconClasses )
  .addClass( getMsgDlgIcon( type ) );
 // we're overriding the existing buttons
 $( "#messagedlg .buttons" ).html( temp );
 $( "#messagedlg .message-text" ).html( text );
 $( "#messagedlg" ).show(0, function() {
  $( "#messagedlg .outter-wrapper" ).show( "slide", {direction: "up" }, function() {
   $( "#messagedlg button:first-child" ).focus();
  });
 });
}

// variations of "MessageDlg" since javascript is case sensitive
function messageDlg( text, type, buttons, callback ) {
 MessageDlg( text, type, buttons, callback );
}

function messagedlg( text, type, buttons, callback ) {
 MessageDlg( text, type, buttons, callback );
}

function msgdlg( text, type, buttons, callback ) {
 MessageDlg( text, type, buttons, callback );
}

function msgInfo( text, callback ) {
 MessageDlg( text, mtInformation, [mbOK], callback );
}

function msgAsk( text, callback ) {
 MessageDlg( text, mtConfirmation, [mbYes, mbNo], callback );
}

function msgWarn( text, callback ) {
 MessageDlg( text, mtWarning, [mbOK], callback );
}

function msgError( text, callback ) {
 MessageDlg( text, mtError, [mbOK], callback );
}

function msg( text, callback ) {
 MessageDlg( text, mtInformation, [mbOK], callback );
}

as you can see, the core of the function doesn't require that much code, however, I've added a few effects here and there to make it more eye pleasing and to be flexible, now the css part: filename.css

.messagedlg {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 z-index: 10000;
 display: none;
 background-image: url(/images/256x256msgdlgbg.png);
}

.messagedlg .outter-wrapper {
 background-color: #fcfcfc;
 border: 2px solid #bababa;
 border-top: 2px solid transparent;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 display: none;
 font-size: 1.5em;
 height: 200px;
 left: 10%;
 position: fixed;
 padding: 1em;
 padding-top: 0;
 width: 80%;
}

.messagedlg .outter-wrapper .buttons {
 border-top: 1px solid #e5e5e5;
 height: 40px;
 text-align: center;
}

.messagedlg .outter-wrapper .buttons button {
 background-color: #fafafa;
 border: 1px solid #d5d5d5;
 border-right: 2px solid #d5d5d5;
 border-bottom: 2px solid #d5d5d5;
 border-radius: 4px;
 font-size: 14px;
 height: 30px;
 margin: 0.5em;
 width: 75px;
}

.messagedlg .outter-wrapper .buttons button:focus {
 border: 1px solid #f80000;
 border-right: 2px solid #f80000;
 border-bottom: 2px solid #f80000;
 font-weight: bold;
}

.messagedlg .outter-wrapper .message-wrapper {
 height: 160px;
}

.messagedlg .outter-wrapper .message-wrapper .message-icon {
 float: left;
 height: 160px;
 width: 128px;
 background-repeat: no-repeat;
 background-position: center center;
}

.icon-information {
 background-image: url(/images/128x128msgdlginfo.png);
}

.icon-confirmation {
 background-image: url(/images/128x128msgdlgconf.png);
}

.icon-warning {
 background-image: url(/images/128x128msgdlgwarn.png);
}

.icon-error {
 background-image: url(/images/128x128msgdlgerror.png);
}

.messagedlg .outter-wrapper .message-wrapper .message-text {
 height: 140px;
 overflow-x: hidden;
 overflow-y: auto;
 padding-top: 1em;
 padding-left: 1em;
}

that's quite a bit of css for something so simple that could have been achieved using a table element, but hey, it works, also, it allows you to tweak things the way your heart dictates. Checkout http://code.google.com/p/delphigeist-javascript-stuff/ for code and other future stuff.