用juqery写的弹窗

原创 2012年03月28日 20:59:14
<!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>


版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

用avalon写的一个弹窗demo

之前项目中,用avalon写的一个模块,单独拿出来了,一个小弹窗的效果。 demo地址: http://www.hui12.com/nbin/demo/4a/4a.html html: ...

自己动手写代码模仿MSN风格的弹窗

清明放假第一天,闲来无事,灵感突发,写下该程序。本程序为纯Win32 SDK实现,未使用MFC库,核心函数为MoveWindow。认识到的问题:1.每移动一次窗口就必须用ShowWindow显示窗口,...
  • swtar
  • swtar
  • 2011-04-29 10:06
  • 246
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)