easyui弹出框
时间: 2023-09-13 13:05:01 浏览: 65
使用EasyUI弹出框非常简单,你可以像下面这样使用:
1. 引入EasyUI的JS和CSS文件
```html
<!-- 引入EasyUI的CSS文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/icon.css">
<!-- 引入jQuery和EasyUI的JS文件 -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script>
```
2. 创建弹出框的HTML代码
```html
<div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" novalidate>
<div class="fitem">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label for="email">Email:</label>
<input type="email" id="email" name="email" class="easyui-validatebox" required="true" validType="email">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">Cancel</a>
</div>
```
3. 初始化弹出框
```javascript
function openDialog() {
$('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Add User');
}
function saveUser() {
$('#fm').form('submit', {
url: 'save_user.php',
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.success) {
$('#dlg').dialog('close');
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}
}
});
}
```
4. 触发弹出框
```html
<a href="#" class="easyui-linkbutton" onclick="openDialog()">Add User</a>
```
这样,一个简单的EasyUI弹出框就完成了,你可以根据自己的需求进行相应的修改。