JQuer ui Dialog Demo札记 _Web前端

JQuer ui Dialog Demo笔记
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery ui 对话框</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<link href="../css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet"/>
	<script src="../js/jquery-ui-1.9.2.custom.js"></script>
	<!--自定义弹窗样式-->
	<style type="text/css">
		.ui-dialog{
			/**background-color: red;*/
		}
		/*弹出层头部样式*/
		.ui-widget-header{
			background: rgba(157, 195, 159, 0.79);/*标题栏背景颜色*/
			border: 0px solid #e78f08;/**/
			color: #ffffff;/*标题颜色*/
		}
		.ui-button-text-only .ui-button-text{
			padding: 0.2em 3em;
		}
	</style>

	<script>
	$(function() {
			$( "#dialog" ).dialog({
				autoOpen:true,//是否自动打开，如果是false $( "#dialog" ).dialog('open')需要用该方法打开
				width:490,
				height:300,
				closeText:'关闭',//关闭按钮显示文字
				title:'弹出确定框',//对话框标题
				resizable:false, //对话框尺寸是否可变
				draggable:false,//是否可以用标题头进行拖动
				buttons:{"确定":function(){ok()} ,"取消":function(){$(this).dialog("close");},"重置":function(){alert("重置")}},//如果单击确定，触发ok()函数
				position: ["center", "center"],	//position: [100, 100]默认显示位置
				hide:'fade',//对话框关闭的效果‘blind’向上卷起，'bounce'跳动，'clip'两边向中间折叠，'drop'向左淡出,'explode'爆炸，四分五裂,'fade'淡入淡出,'fold'折叠，'highlight'高亮显示
				show:'fade',//对话框打开效果'pulsate'有规律的跳动，'puff'由大到小渐入 'scale'由小变大,'shake'摇动,'slide'滑动,overlay
				modal:false,//是否显示遮罩层
			  open:function(){},//打开触发事件
			  close:function(){}//关闭触发事件
			});

		function ok(){
			alert("你单击了确定按钮");
		}
	});
	</script>


</head>
<body>
	<div id="dialog" title="" style="display:none">
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
		<p>比特币中国比特币中国比特币中国</p>
	</div>
</body>
</html>