jQuery UI之dialog中各属性的详解

最新推荐文章于 2018-01-30 14:42:26 发布

霜月枫桥

最新推荐文章于 2018-01-30 14:42:26 发布

阅读量7.1k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/mooncom/article/details/55189616

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!-- 基础类库 -->
<SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT>
<!-- 布局的基本类库(不涉及到布局不需要)-->
<SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT>
<!-- ui的样式表 -->
<link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<!-- ui的类库 -->	
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function () {
		//制定某个div的id 将其作为 Dialog			
		$('#helpdialog').dialog({
					//是否创建就打开对话框，也就是是否页面一打开就显示对话框
					autoOpen: false,
					
					/*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug
					就是在IE6下  div无法覆盖<select></select> 是否使用那该属性解决
					*/
					bgiframe:true,
					
					//设置对话框宽度
					width: 600,
					
					//设置对话框高度
					height: 260,
					
					/*
						设置对话框底部的按钮
					*/
					buttons: {
						"确定": function() {
							//单击按钮后的回调函数，就是按钮被单击后的响应事件 
							$(this).dialog("close"); 
						}
						/*
						"取消": function() { 
							$(this).dialog("close"); 
						}
						*/
					},
					
					/*
						是否为对话框添加ESC快捷键
					*/
					//closeOnEscape: false,
					
					//对话框是否可以被拖动
					draggable:false,
					
					//打开对话框时是否使用特效
					show:"slide",
					//关闭对话框时是否使用特效动画
					hide: "slide",
					
					//是否可以调整对话框的大小
					resizable:false,
					
					//调整对话框的高度和宽度极限值(当resizable:true时)
					//maxHeight:520
					//maxWidth:620
					//minHeight:320
					//minWidth:220
					
					//是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。也就是无法再主界面上进行其他操作
					modal:true,
					
					//是否可覆盖其它对话框
					//stack:false
					
					//对话框标题(也可以再div的title上进行设置)
					title:"请登陆"
					
					//设置对话框 CSS z-index 值
					//zIndex:50
				});
				// 对话框的打开连接
				$('#helpdialog_link').click(function(){
					$('#helpdialog').dialog('open');
					return false;
				});
});
</SCRIPT>
<BODY>	
<a href="#" id="dialog_link">从此处打开对话框</a></span>
	<div id="helpdialog" title="对话框的标题">
		<p>对话框的内容</p>
	</div>
</BODY>

霜月枫桥

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI之dialog中各属性的详解

$(document).ready(function () { //制定某个div的id 将其作为 Dialog $('#helpdialog').dialog({ //是否创建就打开对话框，也就是是否页面一打开就显示对话框 autoOpen: false, /*是否需要解决无法覆盖IE6 select 元素无法被覆盖的bug 就是
复制链接

扫一扫