1、实例背景
EasyUI是一个基于jQuery的框架，集成了各种插件。Dialog是对话框，利用它设计新增用户场景。
2、实例源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI之对话框Dialog</title>
<link rel="stylesheet" href="../themes/black/easyui.css" />
<link rel="stylesheet" href="../themes/icon.css" />
<link rel="stylesheet" href="../css/demo.css" />
<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
<script>
</script>
</head>
<body>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="$('#dataDialog').dialog('open')" style=" 100px;">打开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="$('#dataDialog').dialog('close')" style=" 100px;">关闭</a>
</div>
<div id="dataDialog" class="easyui-dialog" title="新增用户" data-options="iconCls:'icon-save'" style="440px;height:450px;padding:10px">
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="邮箱:" labelPosition="top" data-options="prompt:'输入电子邮箱...',validType:'email'" style="100%;height:52px">
</div>
<div style="margin-bottom:20px">
<input type="radio" name="sex" value="01" checked="checked"><span>男</span>
<input type="radio" name="sex" value="02"><span>女</span>
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="年龄:" labelPosition="top" style="100%;height:52px">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="QQ:" labelPosition="top" style="100%;height:52px">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="电话:" labelPosition="top" style="100%;height:52px">
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="100%;height:42px">确定</a>
</div>
</div>
</body>
</html>
3、实例结果
（1）初始化时
（2）点击关闭按钮
