jquery ui dialog对话框的练习

最新推荐文章于 2025-03-18 15:00:04 发布

魏亚强

最新推荐文章于 2025-03-18 15:00:04 发布

阅读量165

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/wyq188945/article/details/99011971

版权

前端专栏收录该内容

22 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery ui对话框的练习</title>
	</head>
	<link rel="stylesheet" href="css/jquery-ui.css" />
	<body >
		<div id="dialog1">
			姓名：<input><br><br><br>
			密码：<input>
		</div>
		<button id="button" style="color: red;">点击打开对话框</button>
	</body>
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jquery-ui.min.js" ></script>	
	<script type="text/javascript">
		$(function() {		
			//初始化对话框
			var height=$(document).height()*0.5;
			var width=$(document).width()*0.5;			
			$("#dialog1").dialog({
				resizable:false,//调整大小				
				draggable:false,//拖拽
				title:"对话框遮罩效果的实现",//设置对话框的标题 
				autoOpen: false,//自动打开
				width: width,
				height: height,
				modal:true,//遮罩
				position : "center",//这个真好用
				show:"fadeIn",//打开的动画效果
				buttons: {//按钮的设置
	                "取消": function() {
	                    $(this).dialog( "close" );
	                },
                  	"确定": function() {
	                    $(this).dialog( "close" )
	                }          
            	}
			})
		})
		//点击触发对话框
		$("#button").click(function() {			
			$("#dialog1").dialog("open");
		})
	</script>

</html>