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" onclick="$('#dataDialog').dialog('open')" style="width: 100px;">打开</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dataDialog').dialog('close')" style="width: 100px;">关闭</a>
</div>
<div id="dataDialog" class="easyui-dialog" title="新增用户" data-options="iconCls:'icon-save'" style="width:440px;height:450px;padding:10px">
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="邮箱:" labelPosition="top" data-options="prompt:'输入电子邮箱...',validType:'email'" style="width: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="width:100%;height:52px">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="QQ:" labelPosition="top" style="width:100%;height:52px">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="电话:" labelPosition="top" style="width:100%;height:52px">
</div>
<div>
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:100%;height:42px">确定</a>
</div>
</div>
</body>
</html>
3、实例结果
（1）初始化时
![]()
（2）点击关闭按钮
![]()
分享到：
相关推荐
其中，Dialog 对话框组件是常用组件之一，用于显示信息提示、确认对话框、用户输入框等。 #### 2. Dialog 组件基本使用 Dialog 组件可以通过 HTML 标签加载和 JavaScript 脚本加载两种方式实现。 ##### 2.1 HTML ...
这个问题主要是由于EasyUI对话框内部控件的工作机制导致的，尤其是当涉及到`textbox`这类控件时。本文将详细介绍如何解决这个常见问题。 EasyUI的`dialog`组件用于创建弹出式窗口，常用于展示表单、信息提示等。在...
在 EasyUI 中，对话框（Dialog）是一种常见的组件，通常用于显示警告、确认信息或者提供一个交互式的操作空间。对话框具有自己的标题、可选的工具栏和按钮，以及可定制的大小和模态属性。在这篇文章中，我们将深入...
jQuery EasyUI对话框组件不仅提供了基本的打开和关闭功能，还可以通过配置不同的`data-options`来实现很多高级特性，如是否显示最大化和最小化按钮、是否可拖动、对话框位置以及大小等。开发者可以根据具体需求灵活...
在网页开发中，EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列的组件，如对话框、表格、菜单等，帮助开发者快速构建用户界面。在EasyUI中，Messager 是一个用于显示消息提示的组件，它通常用于显示警告、信息...
在 EasyUI 中，对话框（Dialog）是一个非常常见的组件，用于创建弹出式的窗口，通常用于显示详细信息、输入数据或进行交互操作。本文将详细介绍如何使用 jQuery EasyUI 创建和定制对话框。 首先，对话框的使用方法...
2. **配置属性**：EasyUI对话框有许多可配置的属性，如`title`（标题）、`width`和`height`（尺寸）、`modal`（模态或非模态）、`closed`（初始状态是否关闭）、`draggable`和`resizable`（是否可拖动和调整大小）。...
EasyUI 提供了丰富的Dialog方法，如 `open`、`close`、`refresh` 等，以及与之对应的事件，如 `onOpen`、`onClose` 等，可以用于实现更复杂的交互逻辑。例如： ```javascript $('#dlg').dialog('open'); // 打开...
2. **对话框（Dialog）**：jQuery EasyUI中的对话框组件允许开发者创建可自定义的弹出窗口，常用于显示信息、警告、确认或输入数据。它支持多种模式（如模态和非模态）、拖动、最大化、最小化、关闭等操作，并能与...
"Easyui对话框按钮布局实例详解" Easyui是基于jQuery的UI框架，提供了许多实用的UI控件和功能。其中，Dialog是Easyui中的一种常用的控件，用于弹出对话框。今天，我们来讨论Easyui使用Dialog行内按钮布局的实例。 ...
**jQuery EasyUI API 中文文档 - Dialog对话框** 在jQuery EasyUI框架中，Dialog对话框是一种常见的用户交互组件，它扩展了$.fn.window.defaults，并通过$.fn.dialog.defaults重写了默认配置。Dialog主要用于显示...
easyUI 创建Dialog对话框 easyUI Dialog自定义Toolbar和button Tree easyUI 从标记创建Tree easyUI 创建异步Tree easyUI 附加tree节点到tree easyUI 创建Tree和复选框Tree Node easyUI 拖动(Drag)和...
然而，在使用easyui的Dialog组件时，可能会遇到一些bug，比如遮罩层无法完全覆盖页面内容，或者对话框不能正确显示。本文详细介绍了在使用easyui开发时遇到Dialog组件相关bug的具体情况，并提供了相应的解决方案。 ...
- **对话框（Dialog）**：用于弹出窗口，展示信息或者进行交互操作。 - **布局（Layout）**：帮助开发者轻松实现页面区域划分，实现自适应和响应式布局。 - **窗帘（Curtain）**：通常作为加载提示，遮罩屏幕，...
在上述代码中，`id` 属性定义了模态窗口的唯一标识，`class` 使用了 `easyui-dialog` 来应用 EasyUI 的对话框样式。`closed` 属性设置初始状态为关闭，`title` 定义窗口标题，`modal="true"` 表明这是一个模态窗口。...
在jQuery EasyUI框架中，Dialog组件是一个重要的部分，它用于创建模态对话框，以提高用户交互体验。 根据提供的文件信息，我们可以提炼出以下知识点： ### jQuery EasyUI Dialog 组件概述 Dialog组件是jQuery ...