CODEWITHSUNDEEP
jqueryjquery-ui
Derek
Derek

Reputation: 16311

Reusable JQuery Modal Dialog Box?

I've been using jquery on and off for the last 6 months.

I have a form where I want to replace 20 different javascript alert(""); statements with jQuery Modal Dialog boxes.

I don't want to create a separate dialog div section for each different message.

Is there a way with base jquery-ui to create a reusable modal dialog box where I can pass in the message title and message text?

Let me know if you have any ideas?

Derek

Upvotes: 0

Views: 7213

Answers (5)

Ash
Ash

Reputation: 2134

Yes you can create reusable Dialog box and you can pass message dynamically.

  1. Create Dialog Class

    function OkDialog() {

   this.showMessage = function(message) {

    var $dialog = $('<div></div>')

      .html(message)

      .dialog({

         modal: true,

         closeOnEscape: true,

         buttons: {

            Ok: function() {

               $(this).dialog("close");

          }

        }

   });

      $dialog.dialog("open");

   }

}

  2. Create a global object in one of the common file(jsp).

    OK_DIALOG = new OkDialog();

  3. Call this function with desirable message.

    OK_DIALOG.showMessage("You don't have more than a single penny.");

Job Done!!

Upvotes: 7

Geir Freysson
Geir Freysson

Reputation: 590

I used to use Facebox quite a bit but I'm phasing it out in favour of the Dialog box which is part of jQuery's UI collection:

http://docs.jquery.com/UI/Dialog

You mentioned core jquery-ui, does this not do the trick?

Upvotes: 1

superUntitled
superUntitled

Reputation: 22527

I would recommend jQuery's Growl plugin. http://plugins.jquery.com/project/Growl

The benefit to using Growl is that it has some really nice built in functionality, notably the optional ability to have an auto remove function.

It is the non-modal-modal.

What I mean by that is that it does not require the user to interact with it before they can return to interacting with the site, thus maintaining the workflow of the website.

Upvotes: 1

Kris Erickson
Kris Erickson

Reputation: 33834

I heavily recommend Impromptu. It's well documented, has good examples, and basically a drop-in replacement for javascript Alert and Input, however it is very extendable and has a ton of options and extra features.

Upvotes: 2

user14038
user14038

Reputation:

There are a lot of plugins that you can find for jQuery for dialog boxs.

I've used the facebox plugin in the past.

Basic usage could be as simple as:

jQuery.facebox('something cool')

Upvotes: 3

Related Questions