用juqery写的弹窗

最新推荐文章于 2024-09-22 11:17:00 发布

suxiaxuhuanhuan

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量679

点赞数

文章标签： function dialog stylesheet javascript xhtml class

本文链接：https://blog.csdn.net/suxiaxuhuanhuan/article/details/7404597

版权

<!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" type="text/javascript" src="./js/jquery-1.7.1.min.js">
</script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js">
</script>

<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">

 //当窗体加载完毕的时候 触发该匿名函数
 //$(document) //把dom对象转换成jQuery对象
 //$(document).ready(function(){}) 
  $(function(){
	  
	 $("#dialog").dialog({
		 
		 autoOpen:false, //设置对话框打开的方式 不是自动打开
		 show:"bilnd",
		 
		 hide:"explode",
		 
		 modal:true, //遮罩效果 true是遮罩 false是不能遮罩
		 
/*		 buttons:{
			 
			 "确定":function(){
				 //alert("提交");
				 $(this).dialog("close");
				 },
			  "取消":function(){
				  
				  alert("确定取消吗？");
				  }
			 
			 },
*/

            buttons:[{
				
				 text:"ok",
				 
				 click:function(){
					 
					$(this).dialog("close"); 
				 }
					 
				},
					 
			{
					text:"取消",  
					  
					click:function(){
						
					$(this).dialog("close"); 
						}
					  
				
				}],






			 draggable:false, //是否可以拖动
		     closeOnEscape:false,//是否采用esc键退出对话框 如果为false不可用
			 
			 title:"添加用户界面",//添加对话框的标题
			 position:"top",//对话框弹出的位置 可以是center top left right bottom 默认是center
			 width:600,//对话框的高度
		 
		     height:300
			 
		 });
	 //触发链接事件 当你点击 链接 打开一个对话框
	 $("#dialog_link").click(function(){
		
		$("#dialog").dialog("open"); //open参数 作用 打开对话框
		 })
	 //怎么干获取数值的modal值
	 var modalValue=$("#dialog").dialog("option","modal");
	 
	 
	 //怎么设置option中的参数值
	 
	 $("dialog").dialog("option","modal",false)
	 
	 
	  });

</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="nihao">
  hello!
  
  </div>
</body>
</html>