JavaScript’s Alert Method vs. jQuery’s Dialog Widget

What’s the quickest and easiest way to send a message, a note or even a warning to a website’s end-user? The JavaScript alert() method! As handy as it is, I’m certain that even yourself have experienced stressful cases where a website kept stuffing alert messages while you were browsing, and not only that, they’re also old-fashion. Despite the message you want to send, whether it’s a welcome message or a hint, they just look like nasty warnings. Furthermore, with alerts, you don’t have much control in terms of design and accessibility.
For presentational reasons, I’ll build all the code in one html file, but you should always separate the JavaScript code in its own .js file.

JavaScript’s alert function:

FYI, I’m not using inline JavaScript, because, well… it’s against nature and law itself! JS should always be applied from an external source by traversing through the DOM or by targeting css IDs and classes*, so don’t use it inline, or you’ll go to jail!

Natively, javascript cannot target css classes as how it can with IDs, however, there are some good and easy solutions out there to have javascript do just that

I’m sure you guessed by now who’s our favorite hero that comes to the rescue! jQuery!

jQuery UI (User Interface), has a widget called Dialog and we’re going to use it to display a message in a much more pleasant manner:

jQuery UI’s dialog widget:

I’m assuming you have at least some very basic understanding of jQuery to know how the above code works, if not, I’ve written two articles a while ago that might give you a head start:

Approaching jQuery for the first time
Taking advantage web languages basics (see jquery parts)

Difference with jQuery is that we have to create the dialog itself with html, but it can’t be simpler than this. In our example, we just created a paragraph (the content) and wrapped it inside a DIV and gave it an ID, the rest is taken care of by jQuery.

Finally, $(‘#message’).dialog({bgiframe: true, autoOpen: false}); will turn our div into a dialog and hide it by default and can be opened at any time with $(‘#message’).dialog(‘open’);
Unlike JavaScript’s Alert window, our current Dialog still lets you access the current page behind it, but we can adjust that by making it modal.
So we change our dialog creation code from:
$(‘#message’).dialog({bgiframe: true, autoOpen: false});
to
$(‘#message’).dialog({bgiframe: true, autoOpen: false, modal: true});

Now the page should be inaccessible as long as the Dialog is opened.

More on jQuery’s Dialog Widget

You can easily extend the Dialog’s functionality by adding more interactive buttons, icons and… much more.

Go ahead, explore all the Dialog’s options, see how else it can help you.

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

2 thoughts on “JavaScript’s Alert Method vs. jQuery’s Dialog Widget

  1. Hi I am trying to add this sort of thing to my alert functionality my alert is based on form validation which looks something like this:
    function validate_form ( )
    {
    valid = true;

    if ( document.contact.contact_name.value == “” )
    {
    alert ( “Please enter your full name.” );
    valid = false;
    }
    }

    So when you press submit it checks to see if each form place has been written into the above code only checks the name but their is one for each form box. How would i add a dialog box to something like this?

    1. If you’ll implement the jQuery dialog code I’ve written above, all you’ll have to do is replace your alert(“”) function with:

      $(“#message”).dialog(‘open’);

      That will throw in the jQuery’s modal dialog with the message you specify in the dialog’s HTML:

      < div id="message" >
      < p>Hey you, welcome to our site!< /p >
      < /div >

      Let me know if you need any further assistance.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">