jQuery-UI学习dialog

最新推荐文章于 2021-03-11 07:17:53 发布

牧梦

最新推荐文章于 2021-03-11 07:17:53 发布

阅读量1.4k

点赞数

分类专栏： jQuery UI 文章标签： jquery ui

本文链接：https://blog.csdn.net/fengweimm/article/details/21095631

版权

jQuery UI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery对话框</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript">
	$.fx.speeds._default = 500; //动画时间
	$(function() {
		$("#dialog").dialog({
			draggable : true, //是否允许拖动
			resizable : false, //是否允许改变对话框大小
			autoOpen : false, //自动打开对话框
			title : '标题', //设置窗口标题
			width : 300,
			height : 200,
			show : "explode", //显示方式
			hide : "explode", //隐藏方式
			closeOnEscape : true, //按ESC是否退出
			modal : true, //模式窗口
			position : 'center', //窗口位置，可以为坐标[100,100]
			buttons : {
				"关闭按钮" : function() {
					$(this).dialog("close");
				},
				"第二个按钮" : function() {
					$(this).dialog("close");
				}
			},
			//打开窗口时触发
			open : function() {
				alert("open...");
			},
			//拖动前触发
			dragStart : function() {
				alert("dragStart...");
			},
			//窗口关闭后触发
			close : function() {
				alert("close...");
			},
			//这个事件在dialog试图关闭时触发. 如果回调函数返回false,关闭将停止
			beforeClose : function() {
				alert("beforeClose...");
				//return false;
			}
		});
		$("#opener").click(function() {
			$("#dialog").dialog("open");
		});
	});
</script>
</head>
<body>
	<div id="dialog">对话框的内容</div>
	<button id="opener">打开对话框</button>
</body>
</html>

常用属性