jQuery UI example - Dialog (Dialog)
Open content in an interactive overlay.
For more details about the dialog components, see the API documentation dialog components (Dialog the Widget) .
The default function
The basic dialog window is positioned in a viewing zone in the cover layer, through an iframe and page content separated (like select elements). It consists of a title bar and a content area composition, and can be moved, resized, default by 'x' icon to close.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - The default function </ 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://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#dialog") .dialog ();
});
</ Script>
</ Head>
<Body>
<Div id = "dialog" title = "basic dialog">
<P> This is the default dialog box for displaying information. Dialog window can be moved, resized, default by 'x' icon to close. </ P>
</ Div>
</ Body>
</ Html>
Animation
You can specify a special effects show / hide the animation property to display the dialog box. You must refer to a separate file for the effect you want to use special effects.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - Anime </ 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://jqueryui.com/resources/demos/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 display of the dialog box, for displaying information. Dialog window can be moved, resized, default by 'x' icon to close. </ P>
</ Div>
<Button id = "opener"> Open dialog </ button>
</ Body>
</ Html>
Basic mode
Modal dialog rest of the page to prevent users outside of the dialog box to interact until the dialog box is closed.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (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://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Dialog-modal") .dialog ({
height: 140,
modal: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "dialog-modal" title = "basic modal dialogs">
<P> Add-modal overlay screen, make the dialog look more prominent because it dims let other content on the page. </ P>
</ Div>
<P> Sed vel diam id libero <a href="http://www.w3cschool.cc"> 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>
Modal confirmation
Confirm a destructive action may also be possible sense. Setting modal option to true, and by buttons to assign primary and secondary user actions options.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (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 = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Dialog-confirm") .dialog ({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$ (This) .dialog ( "close");
},
Cancel: function () {
$ (This) .dialog ( "close");
}
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "dialog-confirm" title = "Empty trash?">
<P> <span class = "ui-icon ui-icon-alert" style = "float: left; margin: 0 7px 20px 0;"> </ span> These items will be permanently deleted and can not be recovered. Are you sure? </ P>
</ Div>
<P> Sed vel diam id libero <a href="http://www.w3cschool.cc"> 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>
Modal Form
Modal dialog box to request the user to enter data in a multi-step process. Embedded in the content area form tag set modal option to true, and by buttons to assign primary and secondary user actions options.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (Dialog) - Modal Forms </ 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://jqueryui.com/resources/demos/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 ( "" + n + "must be under" +
min + "between." "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, / ^ [az] ([0-9a-z _]) + $ / i, "the user name must be az, 0-9, underscores, and must start with a letter.");
// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
bValid = bValid && checkRegexp (email, / ^ ((([az] | \ d | [# \ $% & '\ * \ + \ - \ / = \ \ ^ _ `{\ |}!? ~] | . [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) + (\ ([az] | \ 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? ))) @ ((([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) | (([az] | \ d | [\ u00A0- \ uD7FF \ uF900 - \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] | \ d | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \) + (([az] |. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF ]) | (([az] | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) ([az] | \ d | - |. \ | _ | ~ | [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]) * ([az] |.?. [\ u00A0- \ uD7FF \ uF900- \ uFDCF \ uFDF0- \ uFFEF]))) \ $ / i, "eg ui @ jquery.com ");
bValid = bValid && checkRegexp (password, / ^ ([0-9a-zA-Z]) + $ /, "password field only allowed: az 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 the 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"> mailbox </ 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 user: </ h1>
<Table id = "users" class = "ui-widget ui-widget-content">
<Thead>
<Tr class = "ui-widget-header">
<Th> Name </ th>
<Th> mailbox </ th>
<Th> password </ th>
</ Tr>
</ Thead>
<Tbody>
<Tr>
<Td> John Doe </ td>
<Td> [email protected] </ td>
<Td> johndoe1 </ td>
</ Tr>
</ Tbody>
</ Table>
</ Div>
<Button id = "create-user"> Create a new user </ button>
</ Body>
</ Html>
Modal message
Modal dialog box to confirm the information and action before the next action is executed. Setting modal option to true, and by buttons to specify the main action options (Ok).
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Dialog (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 = "http://jqueryui.com/resources/demos/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 file has been successfully downloaded to the folder.
</ P>
<P>
The current use of storage space <b> 36% </ b>.
</ P>
</ Div>
<P> Sed vel diam id libero <a href="http://www.w3cschool.cc"> 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>