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