使用dialog插件弹出提示和确定信息对话框8－8

最新推荐文章于 2024-06-28 02:04:24 发布

认真的coder

最新推荐文章于 2024-06-28 02:04:24 发布

阅读量3.5k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

dialog参数说明：http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用dialog插件弹出提示和确定信息对话框</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<style type="text/css">
	body{font-size:13px}
	.txt{border:#666 1px solid;padding:2px;width:180px;margin-right:3px}
	button,.btn{border:#666 1px solid;padding:2px;width:60px;}
</style>
<script type="text/javascript">
	$(function(){
		$("#btnSubmit").bind("click",function(){
			if($("#txtName").val()==""){
				sys_Alert("姓名不能为空！请输入姓名")
			}
		});

		$("#btnDelete").bind("click",function(){
			if($("#spnName").html()!=null){
				sys_Confirm("您真的要删除该条记录吗？");
				return false;
			}
		});
	});

	function sys_Alert(content){
		$("#dialog-modal").dialog({
			height:140,
			modal:true,
			title:'系统提示',
			hide:'slide',
			buttons:{
				Cancel:function(){
					$(this).dialog("close");
				}
			},
			open:function(){
				$(this).html("");
				$(this).append("<p>"+content+"</p>");
			}
		});
	}

	function sys_Confirm(content){
		$("#dialog-modal").dialog({
			height:140,
			modal:true,
			title:'系统提示',
			hide:'slide',
			buttons:{
				'确定':function(){
					$("#spnName").remove();
					$(this).dialog("close");
				},
				'取消':function(){
					$(this).dialog("close");
				}
			},
			open:function(event,ui){
				$(this).html("");
				$(this).append("<p>"+content+"</p>")
			}
		});
	}
</script>
</head>
<body>

	<div>
		<div style="background-color:#eee;padding:5px;width:260px">
			<input id="txtName" type="text" class="txt"/>
			<input id="btnSubmit" type="button" value="提交" class="btn"/>
		</div>
		<div style="padding:5px;width:260px">
			<span id="spnName">张三</span>
			<input id="btnDelete" type="button" value="删除" class="btn"/>
		</div>
		<div id="dialog-modal"></div>
	</div>
	
</body>
</html>