Feb
22

jAlert a jQuery Alert Box Plugin

jAlert is a very easy to use alert box plugin for the javascript framework jQuery. I developed this plugin to use in my own projects and now that I have my own blog I decided to share it with the world.
jalert

Here is a quick example on how is used:

$(document).ready(function()
{
//have an alert box displayed on body load.
$('body').jAlert('Welcome to jAlert Demo Page', "success");

});

Requirements:

Demo:

Download:

I would love to see how you are using jAlert so please post your links in the comments or send me an email. Also, feel free to send your suggestions or any question you guys might have.

44 Comments to “jAlert a jQuery Alert Box Plugin”

  • [...] Julian Castaneda » Blog Archive » jAlert a jQuery Alert Box Plugin John   Comment RSS « Suspekt… A PHP Security Blog [...]

  • Hi, I need a dialog box that user can either click on 'OK' or 'Cancel'. can you do that?

    • Liao,
      Sorry for the late reply, but I was out of the country. The Current version of jAlert does not support dialog box functionality. But I might consider adding it in future iterations.

  • You have tested it and writing form your personal experience or you find some information online?

  • Hi,
    I'm using jAlert to produce number of alerts in validation…I want to set focus for the respective text box, but following code is not working. Is it possible to set focus after the alert box is closed.
    if ($('#txtUsername').val()=='') {
    jAlert('Please enter Username');
    $('#txtUsername').focus();
    return false;
    }
    Thanks

    • jAlert('Please enter Username','title',function(){ your statement or function name});

      jAlert('Please enter Username','title',function(){ $('#txtUsername').focus(); });

  • [...] jAlert a jQuery Alert Box Plugin [...]

  • Mike, not sure what you mean in the drop down? You can add html to the actual message of the alert
    thanks

  • Hello, i have a problem with jConfirm, i should work just like the normal javascript confim box but it doesn't, here's an example

    <input type="submit" value="click" onClick="return jConfirm('are you sure?')">

    If i use the normal confirm it stops the script until a response is given, with jConfirm however, the form is still being submitted, even if no answer is given, any workarounds?

    Thanks in Advance

    • Probably already fixed this. Make the

      <input type="button" onClick="myValidate()" value="Go">

      and handle the click event in a function

      function myValidate(){
      if(jConfirm('Are you sure?')) $("#myForm").submit();
      }

  • Hi, Can you make the module XHTML compatible? Using it in XHTML doctype gives a console error due to the undefined nbsp entity. You have to refer to it by numerical value. Also, you need to use the lower case tag names, 'body' not BODY.

  • jalerts not set to middle of the page, after scrolling in the Iphone any suggestion how to fix it??

    • Ha ha I fixed just use the IE 7 that have a patch also for the Safari!

      • Not sure what you did.. but I'm glad it worked!
        I started to work on a new version, of this plugin that adheres to some standards and I will be incorporating some needed improvements.

  • How can i center the dialogue window in browser always?

    thx

    • Felipe you can center it by displaying the message against the body tag.
      <code>
      $('body').jAlert('This is a message');
      </code>
      You can also put an vertical offset, so it's not in the top edge. You can view an example in the demo page http://www.smooka.com/projects/jalert/

      Thanks

  • Can you tell me how I can increase the width and height of the alert box? It looks like the width of the box is restricted to 40 columns..

  • Kiran,
    The 4th parameter is the width of the box. Height should be automatically.

    $('body').jAlert('This is a jAlert Success Box with custom width of 780px', 'success', 'widthcustom', 780);

    If you know how to use svn you can checkout the latest version from google code. http://code.google.com/p/jalert/
    This version is the latest, and it adheres to jquery plugin standards. and the options are passed as an array. I will release this version soon with some documentation.

  • in your script, after show the alert with overlay, you use the fadeOut method and then the remove method. (line 83 and 87 of the unpacked js).
    It's don't works, because the remove method is executed along the fadeOut method. The div element "#jalert_overlay_"+iud" is removed before happened fadeOut.
    I fix this error like this:
    if (overlay==1) {
    $("#jalert_overlay_"+uid).fadeOut(100, function(){
    $("#jalert_overlay_"+uid).remove();
    });

    }
    $("#jalert_box_cont_"+uid).fadeOut(100, function(){
    $("#jalert_box_cont_"+uid).empty();
    $("#jalert_box_cont_"+uid).remove();
    $(window).unbind("resize");
    });

    Sorry bad english.

    • Hi Can you tell me how I can increase the top and left position of the container_

  • thank you.

  • I like this alerts… Is it possible to get timed alerts, and close alerts ? (alert can be either jAlert, jConfirm, jPrompt)

    I have a webserver that has information for clients. the information is shown in a jConfirm dialog. Once 1 user has clicked acknowledged the information, I want to close the jConfirms on all other clients too. Note that all clients are polling for information regarding to show or close the jConfirms.

    Another thing that I would like is set some kind of timeout: when a jConfirm is opened, and nothing is done by the user, it should close automatically after xx seconds (xx is variable).

    • Not sure what you are asking!
      Close alerts you can close them by clicking in the X at the top right of the alert box.
      Timed alerts, you mean to close the alerts after a set amount of time?

  • hello

  • I am trying to enable this plugin but i have got some error like as :- jQuery is not function and so on also.

  • how this alert show when the login error, in example there's a form login, and when i click the submit login and failed, this alert show, thanks

    • Make Ajax Call, set the Response to the jAlert as the message.

  • amazing plugin, thank you

  • thank you for very useful plugin
    fixed bugs, tweaked it a bit, added timeout, animated it a bit more http://pastebin.com/gw47HcGz

    • Thanks dude.. Yeah I think I will start working on some much needed updates to the plugin as well. It's been over 4 years and more than 8000 downloads.

  • is there any reason why 2 jAlerts commands wouldn't work.

    jAlert('Message 1','Message 1');
    jAlert('Message 2','Message 2');

    the above when executed just displays second jAlert

    • I'm going to assume that they are being overlapped. you can offset each message. You can go to the demo page to see how this is accomplished. http://www.smooka.com/projects/jalert/

  • Hi i am trying to use the jprompt to change the content of a textbox and it works fine but i have a problem with the location i want the jprompt to pop up where i click with the button i have managed to make this work on firefox,chrome but it doesnt work well in ie when i click on the top of the page i get it almoust where i want it but when i click on the bottom on the page it drops down thath i cant even see it on the site. Here is the way i get the coordinates for the jprompt:
    var mainEvent = subEvent ? subEvent : window.event;
    posX=mainEvent.screenX;
    posY=mainEvent.screenY;

    then in reposition in the alerts.js i use
    _reposition: function() {
    var top = posY+$.alerts.verticalOffset;
    var left = posX+$.alerts.horizontalOffset;
    if( top < 0 ) top = 0;
    if( left < 0 ) left = 0;

    Is there a way to make this work for the ie. If someone asks why am i using screenx and screeny the reason is that i have multiple textboxes and i even need to scroll down to get to some of them and if i would take the location of the div that they are created the pop up box woulld just drop out of sight.

    I would appreciate all the help you can give me.

  • [...] trying to use jAlert (http://www.smooka.com/blog/2009/02/22/jalert-jquery-alert-box-plugin/) instead of the usual alert() [...]

  • [...] trying to use jAlert (http://www.smooka.com/blog/2009/02/22/jalert-jquery-alert-box-plugin/) instead of the usual alert() [...]

  • I’ve read some good stuff here. Certainly price bookmarking for revisiting. I wonder how so much attempt you set to make this type of wonderful informative site.

  • after seeing so many change this change that… i dont think i now want this "cool" alerts

  • hummm…average

  • Looking for an ability to just confirm or cancel something? My slick tooltip works well http://flwebsites.biz/jConfirm/

  • parent.top.$(".selectedtab").contents().find('#lMsg').jAlert('Message','fatal','',200);
    i have this code but jalert not working.what may be reason and how to rectify.Anybody knows?

  • Hi
    How can we print the Jalert via PHP?
    The fact is that I am trying to show this alert after checking the database

Leave a comment