Fork me on GitHub

Dialog 2 and friends for JQuery/Bootstrap

Some nice scripts to for building jQuery and bootstrap based web applications.

A jQuery modal dialog plugin based on the bootstrap CSS blue print. Has some nice features such as ajax forms / links, page load indicators and other nice gimmics. Can create in-page modal boxes too, but is basically made for navigation within chains of dialog windows.

Compatibility Note This version of the plugin requires bootstrap >= 2.0. If you still want to use bootstrap 1.x check out the old version of the plugin.

A simple in page alert

Dialogs can be created both using JavaScript and via special links on a page.

Source

Embedding the dialog in the (see automatic links)

<a class="open-dialog" closeOnEscape="false" closeOnOverlayClick="false" showCloseHandle="false" rel="sample1-dialog">simple alert</a>

<!-- which is equivalent to the following JavaScript snippet -->
<script type="text/javascript">
    $(function() {
        $("#sample1-dialog").dialog2({
            showCloseHandle: false,
            removeOnClose: false, 
            autoOpen: false, 
            closeOnEscape: false, 
            closeOnOverlayClick: false
        });

        $(".open-dialog").click(function(event) {
            event.preventDefault();
            $("#sample1-dialog").dialog2("open");
        });
    });
</script>

The dialogs contents (read more about it here)

<div id="sample1-dialog" style="display: none">
    <h1>Simple alert</h1>
    <p>
        It is always beneficial to acknowledge alerts of any kind.
        You can close this alert if you agree. 
        (Note: Normally a dialog box is not that penetrating)
    </p>
    <div class="form-actions">
        <button class="btn-primary close-dialog">Understood</button>
        <button class="btn-danger" onclick="alert('You might reconsider your click behaviour!')">I don't care</button>
    </div>
</div>

Dialog page flow

A dialogs content can be loaded via ajax. Inside a dialog, the user can navigate via links as well as form submissions. Additionally navigation can be programmatically controlled via JavaScript. In most cases however there is barely any JavaScript needed to set up page flow within a dialog (see how html markup impacts the dialog).

Source

Embedding the dialog in the (see automatic links)

<a class="open-dialog" rel="sample2-dialog" href="pages/dialog1.html">running example</a>

Contents of first dialog page

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery dialog2 plugin</title>
    </head>
    <body>
        <h1>My Dialog</h1>
        <p>
            This is some fine body.
            <a class="ajax" href="pages/dialog2.html">Click this link</a> (will stay in dialog).
        </p>
        <div class="form-actions">
            <a class="btn close-dialog" href="#">Cancel</a>
        </div>
    </body>
</html>

Contents of second dialog page

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery dialog2 plugin</title>
    </head>
    <body>
        <h1>Thanks :-)</h1>
        <p>
            Thanks for clicking the previous link. May you tell me your name?
        </p>
        <form class="ajax" method="get" action="pages/finish.html">
            <fieldset>
                <div class="clearfix">
                    <label for="name">Your name</label>
                    <div class="input">
                        <input type="text" name="name" id="name" />
                    </div>
                </div>
            </fieldset>
            <div class="form-actions">
                <input type="submit" value="Send" class="btn btn-primary" />
                <a class="btn close-dialog" href="#">Cancel</a>
            </div>
        </form>
    </body>
</html>

Contents of final dialog page

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery dialog2 plugin</title>
    </head>
    <body>
        <h1>That's really it</h1>
        <p>
            All right, so much about this short demo.
        </p>
        <script type="text/javascript">
            $("#sample2-dialog").dialog2({
                buttons: {
                    "Close": function() {
                        $(this).dialog2("close");
                    } 
                }
            });
        </script>
    </body>
</html>

Controlling a dialog via JavaScript

The dialog plugin exposes a jquery interface which can be invoked via JavaScript. The jquery method dialog2 is both the constructor for new dialogs and the provider of the API. The constructor accepts an options argument like $(".selector").dialog2(options) and the invocation of an API method starts with the method name and the list of method arguments like $(".selector").dialog2("removeButton", "Close"). See detailed notes on that.

Loading server content (programmatic way)

It is possible to pass a content attribute to the dialog via its constructor options to make the dialog display a certain web page.

Source
<a href="#" id="show-server-notice-link">show me some server content!</a>
<script type="text/javascript">
    $(function() {
        $("#show-server-notice-link").click(function(event) {
            $('<div/>').dialog2({
                title: "Server notice", 
                content: "pages/notice.html", 
                id: "server-notice"
            });

            event.preventDefault();
        });
    });
</script>

Creating in page dialogs

Dialogs can be created using an existing element as a body or by aggregating a number of elements in it.

Create and open dialog from single div. No AJAX is needed here (View source)

This is an alert! Just want to inform you about that.

Source
<div id="alert">
    <p>This is an alert! Just want to inform you about that.</p>
</div>
<script type="text/javascript">
    $(function() {
        $("#alert").dialog2({
            title: "Alert", 
            autoOpen: false,
            buttons: {
                Close: { 
                    primary: true, 
                    click: function() {
                        $(this).dialog2("close");
                    }
                }
            }, 
            removeOnClose: false
        });
    });
</script>

Open dialog which aggregates a number of elements. No AJAX is needed here (View source)

foo

and

bar

makes

foobar

Source
<p class="custom-dialog-content">
    foo
</p>
<p class="custom-dialog-content">
    and
</p>
<p class="custom-dialog-content">
    bar
</p>
<p class="custom-dialog-content">
    makes
</p>
<p class="custom-dialog-content">
    foobar
</p>
<script type="text/javascript">
    $(function() {
        $(".custom-dialog-content").dialog2({
            title: "Alert", 
            id: "alert2",
            autoOpen: false,
            buttons: {
                Close: { 
                    primary: true, 
                    click: function() {
                        $(this).dialog2("close");
                    }
                }
            }, 
            removeOnClose: false
        });
    });
</script>

Let the markup rule

Default behaviour

Dialog will show load indicator every time an ajax request is done to load new dialog pages from somewhere. If response body contains a h1 the contents of this heading will be the new dialog title.

If response html contains a submitable form.ajax a submit handler will be bound the dialog and a submit button will be added to the dialog while the original submit button (if any) will be hidden.

a.ajax links within the dialog content will trigger loading of a new dialog page inside the dialog.

In conjunction with the jquery.controls plugin, the dialog will register dialog open for all a.open-dialog within a document. The title will be via the links title attribute and the id is determined via the links rel attribute (see previous examples on that).

Dialog customizations based on its content

The dialog will change its apperance and behaviour based on its contents:

  • The first h1 text content is used as the dialogs title.
  • a.ajax elements in the dialogs content navigate to new pages within the dialog.
  • form.ajax elements are ajax-submitted and the response is displayed as the new content of the dialog.
  • All elements (input[type=submit], input[type=reset], input[type=button], button, .btn) within a .form-actions element inside the dialog body are treated as buttons and override the dialogs current buttons. Buttons added to the dialog will inherit the original buttons class, click behaviour and text (e.g. a button mapping to a input[type=submit] will submit the form the original input was attached to).

This is a special alert

Submit this dialog to go to heaven!

Source
<a href="#" rel="alert3" class="open-dialog">Demonstrate that!</a>
<div id="alert3">
    <h1>This is a special alert</h1>
    <p>Submit this dialog to go to heaven!</p>
    <form class="ajax" method="get" action="pages/heaven.html">
        <input type="hidden" name="nothing" value="to-see" />
        <div class="form-actions">
            <input type="submit" class="primary" />
            <a class="btn close-dialog" href="#">Close</a>
        </div>
    </form>
</div>

Decision

Decide on an option

Info Success
Source
<a href="#" rel="alert4" class="open-dialog">decide on my favourite button color!</a>

<div id="alert4">
    <h1>Decision</h1>
    <p>Decide on an option</p>
    <div class="form-actions">
        <a class="btn btn-info" href="#">Info</a>
        <a class="btn btn-success" href="#">Success</a>
        <button class="btn btn-danger">Danger</button>
        <button class="btn dialog-close">Close</button>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#alert4 .form-actions > *").click(function() {
            alert("You chose " + $(this).text());
        });
    });
</script>

Using alert, confirm and prompt helpers

The script file jquery.dialog2.helpers.js provides unobstrusive counterparts to the window functions alert, confirm and prompt. They are available as function in the namespace $.fn.dialog2.helpers.*.

Source
<a href="#" id="show-alert">alert</a>, 
<a href="#" id="show-confirm">confirm</a>, 
<a href="#" id="show-prompt">prompt</a>
<script type="text/javascript">
    $("#show-alert").click(function(event) {
        $.fn.dialog2.helpers.alert("This dialog is non intrusive", { 
            close: function() {
                alert("This one is!");
            }
        });

        event.preventDefault();
    });

    $("#show-prompt").click(function() {
        $.fn.dialog2.helpers.prompt("What is your age?", {
            ok: function(event, value) { alert("Your age is: " + value); }, 
            cancel: function() { alert("Better tell me!"); }
        });

        event.preventDefault();
    });

    $("#show-confirm").click(function() {
        $.fn.dialog2.helpers.confirm("Is this dialog non intrusive?", {
            confirm: function() { alert("You said yes? Well... no"); }, 
            decline: function() { alert("You said no? Right choice!") }
        });

        event.preventDefault();
    });
</script>
                        

Hook into the behaviour of the dialog using events

One can hook into the dialog by listening to events prefixed with dialog2..

Open a dialog logging fired events.
Show the logged events.

The events observed during the life cycle of a dialog are sumarized in the table below:

event namesemantics
dialog2.before-openthe dialog is about to open
dialog2.openedthe dialog was opened
dialog2.focussedthe dialog gains focus
dialog2.ajax-startan ajax update is about to start
dialog2.before-sendthe xhr request is about to be sent inside the dialog (on form submit or content load). jqXhr, settings is passed as additional arguments
Updating the contents with the dialogs initial html
dialog2.content-updateupdate content
dialog2.before-ajaxifybefore applying ajax controls to content
dialog2.after-ajaxifyafter applying ajax controls to content
dialog2.before-update-markupbefore updating the dialog markup from content HTML (e.g. update button bar)
dialog2.after-update-markupafter updating the dialog markup
dialog2.focussedthe dialog gains focus once more (selects first focusable element)
dialog2.ajax-completeajax operation is complete
Updating the contents with the response received from the server (events have same semantics as explained above)
dialog2.content-update
dialog2.before-ajaxify
dialog2.after-ajaxify
dialog2.before-update-markup
dialog2.after-update-markup
dialog2.focussed
dialog2.closedthe dialog is closed

Clarification needed?

Check out the plugin documentation.