Cross-Browser JavaScript Message Library

| Comments (26)

After introducing a new dhtmlxMessage component in DHTMLX 3.0, we decided to enhance it and provide a complete solution for displaying dialog boxes on a web page. Using the code of dhtmlxMessage, we’ve created a lightweight JavaScript message library that is released under MIT license and can be used for free in any web app.

JavaScript Message Library from DHTMLX

JavaScript Message Library from DHTMLX

The library can be used to show alerts, confirm boxes, or unobtrusive popup messages to give the user additional info or explanations. The appearance of the dialog boxes can be easily customized. The library API gives you full control over the messages look and feel.

Message Library from DHTMLX - Confirm Box

Message Library from DHTMLX - Confirm Box

The source code of the message library is available on GitHub. You are welcome to use this library in your DHTMLX based applications (it has native DHTMLX skin) or in your other projects. The library is only 3Kb (gzipped) and works in the majority of web browsers (IE, FF, Chrome, Safari, Opera).

Comments

  1. ikhsan October 18, 2011 at 8:44 pm

    it’s a great new feature, although it simple, but it very useful

    why not included in core suite? just like dhtmlxAjax and dhtmlxMessage? and use sky_blue skin

    • Ivan October 19, 2011 at 7:01 pm

      Thank you for your feedback. We plan to include the message library in the next update of dhtmlxSuite, and there is ‘sky blue’ skin (you can choose it in ‘Skin’ dropdown on the demo page).

  2. bkpr October 19, 2011 at 7:03 pm

    В примере “04_skins.html” если нажать на кнопку вызова alert`ов или confirm`ов а потом нажать на пробел или enter то будут создаваться новые сообщения поверх уже открытых.
    Наверно надо переводить фокус на кнопку “ОК” сообщения.
    Проверял в IE 8 и FF 7.

    • Ivan October 20, 2011 at 1:58 pm

      Исправлено. Спасибо за подсказку!

  3. zee October 21, 2011 at 6:30 pm

    Good! I was expecting such enhancement:-)

  4. Vinu Felix October 22, 2011 at 1:10 am

    It works and looks super cool on Chrome(maybe Firefox too) but screws up big time with dhtmlx layouts on IE8.

    • Vinu Felix October 23, 2011 at 3:17 pm

      I give up. I tried putting and and changed all
      position:fixed; to position:absolute;
      in message_default.css .

      it works on pages without dhtmlxlayout. But the messagebox displayed is transparent. IE9 does not seem to be having this problem however. Any fixes guys ?

      • Inga October 24, 2011 at 3:57 pm

        It should work fine with dhtmlxLayout. Just correct the order of .js files: include the files of the message library after the .js files of dhtmlxLayout.
        As for IE issue, use the standards mode (full doctype).

  5. dactar October 23, 2011 at 11:17 pm

    Don’t work on my browser (Firefox 3.6.23 / Linux Mint)

    • Tom October 24, 2011 at 11:06 am

      Same problem here but on Win7.
      Firefox console shows: dhtmlx.message is not defined. Line: 177

      • Inga October 24, 2011 at 3:51 pm

        The library has been updated and it now works in FF 3.6.

        • dactar October 25, 2011 at 1:40 am

          great :)

  6. Shaun Betts October 31, 2011 at 3:58 pm

    Is anyone else having problems with the message box in IE9?

    The styling seems to be messed up.

    • Stan October 31, 2011 at 5:58 pm

      Be sure that you are using IE in standard mode, quirks mode is not supported.

  7. Shaun Betts November 1, 2011 at 12:20 pm

    Ok thanks Stan I have had a look at stopping quirks mode and by adding this html tag at the top it seemed to fix my problems

    There should NOT be anything before the tag

    Thank You again

  8. Isabel December 12, 2011 at 8:35 pm

    I added the message.js file after the layout one but it is not working over the layouts

  9. Isabel December 21, 2011 at 8:52 pm

    Message component does not work on IE7

    • Ivan March 9, 2012 at 4:26 pm

      Isabel, jsMessage does work in IE7, just be sure to use standard mode (the page must have full doctype).

  10. Kameron February 22, 2012 at 9:11 pm

    Have there been any fixed for this in IE? I am using IE9 and it doesn’t seem to be happy about the layout that is there. There is talk of an html tag that can be added to change the mode, what is the tag and where should it be placed?

    Thanks

  11. Amit March 8, 2012 at 9:48 pm

    Love this feature. I am trying to use the Model Box with content reuse.

    However, when a different dhtmlx message is shown … example:
    var msg = dhtmlx.alert(“Error!”);
    then the original modal box is not longer available and the variable shows up as null

    Is there a way i can use multiple modal boxes, have different content attached to it and use them in conjunction?

    example:

    var box1 = dhtmlx.modalbox(content:”mycontentA”);
    dhtmlx.modalbox.hide(box1);
    var box2 = dhtmlx.modalbox(content:”mycontentB”);
    dhtmlx.modalbox.hide(box2);
    dhtmlx.alert(“Error!”);
    dhtmlx.modalbox(box1);

    • Amit March 8, 2012 at 10:08 pm

      Actually, seems like i run into problems when i define it as
      box = dhtmlx.modalbox(content:”mycontentA”);
      But if i use any other variable name … like say “box1” … then it works fine.
      Thanks.

  12. Skip August 5, 2012 at 9:57 am

    I’m using this on a mobile site to notify a user that they have been redirected. Is there a way to make this popup only once per browser session or set a time to store cookies?

    • Stanislav August 8, 2012 at 2:08 pm

      The lib itself has not any special functionality for it. It just shows messages.
      But you can use a bit of javascript

      if (windows.sessionStorage && !sessionStorage.visited){
      dhtmlx.message(“some”);
      sessionStorage.visited = true;
      }

  13. Aleks June 5, 2013 at 1:13 am

    How to show Alert on page load? Also, same for Modal Box.

Leave a Reply