jQuery+easyui dialog窗口-CSDN博客

本文链接：https://blog.csdn.net/chaoyv/article/details/88303119

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>对话框</title>
<!-- easyui 主题样式 -->
<link rel="stylesheet" href="themes/icon.css" type="text/css" />
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- easy ui -->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!-- 本地化 -->
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	$("#dd2").dialog({
		model:true,
		width:480,
		height:320,
		iconCls:"icon-save",
		//工具栏
		toolbar:[{
			text:"添加",
			iconCls:'icon-add',
			//点按钮事件
			handler:function(){
				$.messager.alert('警告','要添加了!','warning');
			}
		},'-',{
			text:"保存",
			iconCls:'icon-save',
			handler:function(){
				$.messager.confirm('问题','要继续保存吗？','question');
			}
		}],
		//底部按钮
		buttons:[{
			text:"确定",
			iconCls:'icon-ok',
			handler:function(){
				$.messager.show({
					title:'标题',
					msg:'显示信息',
					timeout:2000
				});
			}
		},{
			text:"取消",
			handler:function(){
				$('#dd2').dialog("close");
			}
		}]
	});
});
</script>
</head>
<body>
	<div id="dd1" title="My Dialog" style="width: 400px; height: 200px;"
		class="easyui-dialog">Dialog Content1</div>
	<div id="dd2" title="My Dialog">Dialog Content2</div>
</body>
</html>

效果图：