jQuery UI & Dialog: Modal Dialog Box Alert

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

jQuery UI Dialog – Modal message

Use a modal dialog to explicitly acknowledge information or an action before continuing their work.

Set the modal option to true, and specify a primary action (Ok) with the buttons option.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Dialog - Modal message</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-message').dialog({
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id='dialog-message' title='Download complete'>
    <p>
        <span class='ui-icon ui-icon-circle-check' style='float:left; margin:0 7px 50px 0;'></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>

    <p>
        Currently using <b>36% of your storage space</b>.
    </p>
</div>

<p>Modal Dialog Box Alert Demo</p>

</body>
</html>
Try The Code

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: Confirmation With Modal Dialog Box

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

jQuery UI Dialog – Modal confirmation

Confirm an action that may be destructive or important.

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 confirmation</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-confirm').dialog({
                resizable: false,
                height: 200,
                modal: true,
                buttons: {
                    'Delete all items': function () {
                        $(this).dialog('close');
                    },
                    Cancel: function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>

<div id='dialog-confirm' title='Empty the recycle bin?'>
    <p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>These items will be
        permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href='http://example.com'>rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus
    rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor
    elit eros a lectus.</p>

</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