jQuery UI 实例 – 对话框（Dialog）
在一个交互覆盖层中打开内容。
如需了解更多有关 dialog 部件的细节，请查看 API 文档 对话框部件（Dialog Widget）。
默认功能
基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 \’x\’ 图标关闭。
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>jQuery UI 对话框（Dialog） - 默认功能</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 title=\"基本的对话框\">
<p>这是一个默认的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 \'x\' 图标关闭。</p>
</div>
</body>
</html>
动画
可以通过为 show/hide 属性指定一个特效来动画显示对话框。您必须为想使用的特效引用独立的特效文件。
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>jQuery UI 对话框（Dialog） - 动画</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 title=\"Basic dialog\">
<p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 \'x\' 图标关闭。</p>
</div>
<button>打开对话框</button>
</body>
</html>
基本的模态
模态对话框防止用户与对话框以外的页面其他部分进行交互，直到对话框关闭为止。
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>jQuery UI 对话框（Dialog） - 基本的模态</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 title=\"基本的模态对话框\">
<p>添加模态覆盖屏幕，让对话框看起来更突出，因为它让页面上其他内容变暗。</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 选项为 true，并通过 buttons 选项来指定主要的和次要的用户动作。
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>jQuery UI 对话框（Dialog） - 模态确认</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 title=\"清空回收站吗？\">
<p><span style=\"float:left; margin:0 7px 20px 0;\"></span>这些项目将被永久删除，并且无法恢复。您确定吗？</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>
模态表单
使用模态对话框来请求用户在一个多步骤过程中输入数据。在内容区域嵌入 form 标记，设置 modal 选项为 true，并通过 buttons 选项来指定主要的和次要的用户动作。
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>jQuery UI 对话框（Dialog） - 模态表单</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 + \" 的长度必须在 \" +
min + \" 和 \" + 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: {
\"创建一个帐户\": 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, \"用户名必须由 a-z、0-9、下划线组成，且必须以字母开头。\" );
// 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])+$/, \"密码字段只允许： 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 title=\"创建新用户\">
<p>所有的表单字段都是必填的。</p>
<form>
<fieldset>
<label for=\"name\">名字</label>
<input type=\"text\" name=\"name\">
<label for=\"email\">邮箱</label>
<input type=\"text\" name=\"email\" value=\"\">
<label for=\"password\">密码</label>
<input type=\"password\" name=\"password\" value=\"\">
</fieldset>
</form>
</div>
<div>
<h1>已有的用户：</h1>
<table>
<thead>
<tr>
<th>名字</th>
<th>邮箱</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button>创建新用户</button>
</body>
</html>
模态消息
使用模态对话框来在下一步动作执行之前确认信息和动作。设置 modal 选项为 true，并通过 buttons 选项来指定主要的动作（Ok）。
<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>jQuery UI 对话框（Dialog） - 模态消息</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 title=\"下载完成\">
<p>
<span style=\"float:left; margin:0 7px 50px 0;\"></span>
您的文件已经成功下载到文件夹中。
</p>
<p>
当前使用存储空间的 <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>
点我分享笔记