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'>
    <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='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
                height: 140,
                modal: true

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

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

Try The Code

Series Navigation<< jQuery UI & Dialog: A Modal Mode Dialog Form
jQuery UI & Dialog: Confirmation With Modal Dialog Box >>

Leave a comment

Leave a Reply