用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>


相关文章推荐

ios swift写的第三方分享弹窗

  • 2015年09月06日 17:09
  • 1.77MB
  • 下载

用avalon写的一个弹窗demo

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

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

       清明放假第一天,闲来无事,灵感突发,写下该程序。本程序为纯Win32 SDK实现,未使用MFC库,核心函数为MoveWindow。认识到的问题:1.每移动一次窗口就必须用ShowWind...
  • swtar
  • swtar
  • 2011年04月29日 10:06
  • 260

fancybox 弹窗插件

  • 2017年11月08日 16:24
  • 617KB
  • 下载

jquery mobile + html5 手机app表单跨域提交实例(手机app开发html5 juqery moblie phonegap系列一)

第一次写博文,把学习过程记录下来也留个底,免得以后不用都忘了
  • lzy8395
  • lzy8395
  • 2014年09月29日 09:55
  • 2324

纯JavaScript弹窗效果

  • 2016年08月17日 22:03
  • 169KB
  • 下载

在ASP.NET MVC中使用Juqery实现页面局部刷新

在ASP.NET MVC中使用Juqery实现页面局部刷新 自己做的一个实验,留作备忘,此实例包括扩一下几个文件: 1、MyMovieController.cs 2、Index.aspx...
  • wlanye
  • wlanye
  • 2012年02月18日 21:37
  • 990

zTree树结构包,与jBox弹窗的包

  • 2017年07月16日 16:02
  • 1.42MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用juqery写的弹窗
举报原因:
原因补充:

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