jQuery UI & Dialog: A Modal Mode Dialog Form

This entry is part 4 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Modal form

Use a modal dialog to require that the user enter data during a multi-step process.

Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal form</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        body {
            font-size: 62.5%;
        }

        label, input {
            display: block;
        }

        input.text {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

        div#users-contain table {
            margin: 1em 0;
            border-collapse: collapse;
            width: 100%;
        }

        div#users-contain table td, div#users-contain table th {
            border: 1px solid #eee;
            padding: .6em 10px;
            text-align: left;
        }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
    <script>
        $(function () {
            var name = $('#name'),
                    email = $('#email'),
                    password = $('#password'),
                    allFields = $([]).add(name).add(email).add(password),
                    tips = $('.validateTips');

            function updateTips(t) {
                tips
                        .text(t)
                        .addClass('ui-state-highlight');
                setTimeout(function () {
                    tips.removeClass('ui-state-highlight', 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass('ui-state-error');
                    updateTips('Length of ' + n + ' must be between ' +
                            min + ' and ' + max + '.');
                    return false;
                } else {
                    return true;
                }
            }

            function checkRegexp(o, regexp, n) {
                if (!( regexp.test(o.val()) )) {
                    o.addClass('ui-state-error');
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }

            $('#dialog-form').dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    'Create an account': function () {
                        var bValid = true;
                        allFields.removeClass('ui-state-error');

                        bValid = bValid && checkLength(name, 'username', 3, 16);
                        bValid = bValid && checkLength(email, 'email', 6, 80);
                        bValid = bValid && checkLength(password, 'password', 5, 16);

                        bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, 'Username may consist of a-z, 0-9, underscores, begin with a letter.');
                        // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                        bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, 'eg. ui@jquery.com');
                        bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, 'Password field only allow : a-z 0-9');

                        if (bValid) {
                            $('#users tbody').append('<tr>' +
                                    '<td>' + name.val() + '</td>' +
                                    '<td>' + email.val() + '</td>' +
                                    '<td>' + password.val() + '</td>' +
                                    '</tr>');
                            $(this).dialog('close');
                        }
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                },
                close: function () {
                    allFields.val('').removeClass('ui-state-error');
                }
            });

            $('#create-user')
                    .button()
                    .click(function () {
                        $('#dialog-form').dialog('open');
                    });
        });
    </script>
</head>
<body>

<div id='dialog-form' title='Create new user'>
    <p class='validateTips'>All form fields are required.</p>

    <form>
        <fieldset>
            <label for='name'>Name</label>
            <input type='text' name='name' id='name' class='text ui-widget-content ui-corner-all'>
            <label for='email'>Email</label>
            <input type='text' name='email' id='email' value='' class='text ui-widget-content ui-corner-all'>
            <label for='password'>Password</label>
            <input type='password' name='password' id='password' value='' class='text ui-widget-content ui-corner-all'>
        </fieldset>
    </form>
</div>


<div id='users-contain' class='ui-widget'>
    <h1>Existing Users:</h1>
    <table id='users' class='ui-widget ui-widget-content'>
        <thead>
        <tr class='ui-widget-header '>
            <th>Name</th>
            <th>Email</th>
            <th>Password</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John Doe</td>
            <td>john.doe@example.com</td>
            <td>johndoe1</td>
        </tr>
        </tbody>
    </table>
</div>
<button id='create-user'>Create new user</button>

</body>
</html>
Try The Code

jQuery UI & Dialog: Modal Mode

This entry is part 5 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Basic modal

A modal dialog prevents the user from interacting with the rest of the page until it is closed.

If you try to click on yahoo link, nothing will happen as the dialog box is now in control.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Basic modal</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#dialog-modal').dialog({
                height: 140,
                modal: true
            });
        });
    </script>
</head>
<body>

<div id='dialog-modal' title='Basic modal dialog'>
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

<p>You can try to click on this link <a href='http://yahoo.com.com'>Yahoo</a>. But nothing will happen.</p>

</body>
</html>
Try The Code

jQuery UI & Dialog: Dialog With Animation

This entry is part 3 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Animation

Dialogs may be animated by specifying an effect for the show and/or hide properties.

You need to include the individual effects for any effects you would like to use.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Animation</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                show: {
                    effect: 'blind',
                    duration: 1000
                },
                hide: {
                    effect: 'explode',
                    duration: 1000
                }
            });

            $('#opener').click(function () {
                $('#dialog').dialog('open');
            });
        });
    </script>
</head>
<body>

<div id='dialog' title='Basic dialog'>
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized
        and closed with the 'x' icon.</p>
</div>

<button id='opener'>Open Dialog</button>


</body>
</html>
Try The Code

jQuery UI & Dialog: Basic Dialog Box

This entry is part 1 of 6 in the series jQuery UI Dialog

jQuery UI Dialog – Default functionality

The basic dialog window is an overlay positioned within the page and is protected from page content (like select elements) shining through with an iframe.

It has a title bar and a content area, and can be moved, resized and closed with the ‘x’ icon by default.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#dialog').dialog();
        });
    </script>
</head>
<body>

<div id='dialog' title='Basic dialog'>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized
        and closed with the 'x' icon.</p>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Popup dialog

This entry is part 61 of 73 in the series jQuery Mobile

Standard dialog box can be placed into a popup.

We can add the data-dismissible=”false” attribute to the popup to let the popup take control of the screen.

You can only close the dialog box if you click inside the dialog box.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Popup App</h1>
    </div>

    <div data-role='content'>
        <a href='#popupDialog' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-a'>Delete page...</a>
        <div data-role='popup' id='popupDialog' data-overlay-theme='b' data-theme='b' data-dismissible='false' style='max-width:400px;'>
            <div data-role='header' data-theme='b'>
                <h1>Delete Page?</h1>
            </div>
            <div role='main' class='ui-content'>
                <h3 class='ui-title'>Are you sure you want to delete this page?</h3>
                <p>This action cannot be undone.</p>
                <a href='#' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b' data-rel='back'>Cancel</a>
                <a href='#' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b' data-rel='back' data-transition='flow'>Delete</a>
            </div>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

In this example, I have used an anchor to create the delete page button.  I have used class=’ui-btn-a’ to make the button into a theme a button.

As for the popup dialog, it was built using theme b.

In line 21, ui-content class was added to the popup to add the standard 15px of padding.