Modal Dialog

Sometimes you just want a simple modal dialog box that works in most browsers without too much to do about it. Here’s a possibility.

Jquery makes it so easy.

1. Identify a div tag that contains the content you want to popup and display.
In this case, we have a div tag called dialog_betamode.
We also have an element called floating_betamode that we will click to launch the dialog.

2. Put this in your initialization area

    $(function () {
        var dlg = $("#dialog_betamode").dialog({
            autoOpen: false,
            show: "blind",
            modal: true,
            resizable: false
        });
    });
    $("#floating_betamode").click(function () {
        $("#dialog_betamode").dialog("open");
        return false;
    });

3. Take out modal:true if you want the user to be able to do other things while it’s displayed.

Advertisements
Previous Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: