使用jQuery插件实现模拟dialog的遮罩效果

最新推荐文章于 2020-08-28 09:21:14 发布

HUMHSX

最新推荐文章于 2020-08-28 09:21:14 发布

阅读量3.3k

点赞数

文章标签： dialog jquery插件 function javascript stylesheet xhtml

本文链接：https://blog.csdn.net/humhsx/article/details/7404254

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!-- 引入css类库 -->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" language="javascript">
$(function (){
	$("#dialog").dialog({
		autoOpen:false,   //设置对话框的打开方式 不是自动打开
		show:"blind",  //打开时的效果
		hide:"explode" ,//关闭时的效果
		 modal:true ,	 //遮罩效果 false 非遮罩效果
		/* buttons:{//添加按钮操作
		 "确定":function (){
			  $(this).dialog("close"); //关闭对话框
			  },
		 "取消":function (){
			  alert("取消的操作"); }} */
			 //添加
	//buttons:的第二种方式		 
	buttons:[
		{
		text:"ok",
		click:function (){
		  $(this).dialog("close"); //关闭对话框	
			 }
		},
		{
		text:"cancel",
		click:function (){
		  //关闭对话框
		  $(this).dialog("close"); 	
			 }
		}
		 ],		  	 
		
		draggable:true, //可以拖动时 true 可以拖动 默认值就是true 
		 closeOnEscape:true, //false 是否采用esc键退出对 话框 如果true 采用esc
		 title:"添加用户操作界面",
		 position:"top", //对话框弹出的位置 可以是top left right
		 width:800,//对话框的宽度
		 height:200,
		resizable:true, //是否可以改变高度
		zIndex:1000,
		drag:function (event,ui){
		//	$("#dialog")
			//对话框当前的坐标位置
			 }
		     });
	 
		 //触发连接的事件，当你点击  链接 打开一个对话
	 $("#dialog_link").click(function (){
		//open参数 作用  打开一个对话框
			$("#dialog").dialog("open");  
		  });
		  //我怎么获取，我设置的options中的参数值
		 
		  
		  
	  })
</script>
  <style>
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
</style> 
</head>
<body>

<h1>模拟dialog效果</h1>
<!-- 创建一个连接-->
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all" ><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
<!-- div对话框 $("#dialog").dialog(); 它就成了一个对话框 在页面中就会隐藏掉-->
<div id="dialog" title="hi" style="display:none">

hello  world!!!
 </div>



</body>
</html>