模拟dialog效果

原创 2012年03月28日 17:54:55
 <a id="dialog_link" class="ui-state-dfault ui-corner-all" href="##"><span> </span>open </a>    
  <!--div $("#dialog").dialog() 他就成了一个对话框 在页面中就会隐藏-->
 <div id="dialog" title=" 文本框中的title">
  文本框中的内容
 </div>

<script src="../jquery/jquery-1.7.1.js"></script>
<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />
<script>
  $(function(){
	  //注册对话框
	   
	   $("#dialog").dialog({
		  autoOpen:false , //设置对话框的打开方式不是自动打开   
		  show:'blind', //打开时的动画效果
		  hide:'explode', //关闭时的动画效果
		  modal:true,  //遮罩效果   false 非遮罩效果
		  resizable:false,
		 /* buttons:{  //添加按钮操作
			  "确定":function(){
				 //alert("确定"); 
				  $(this).dialog("close");
			  },
			  "取消":function(){
				// alert("取消");
				$(this).dialog("close");    
			  }
		  },*/
		  //效果与上边的buttons效果相同
		  buttons:[
		      {
			     text:"ok",
				 click:function(){
					 $(this).dialog("close"); 
				 }
			  },
			  {
			     text:"取消",
				 click:function(){
					 $(this).dialog("close"); 
				 }
			  }],
		  draggable:true, //是否可以拖动  默认true 可以拖动
		  closeOnEscape:false , //是否采用esc键退出对话框 默认值是true 采用
		  title:"添加用户",//对话框的标题
		  position:"top", //对话框弹出的位置 可以使用top left right bottom center默认值是center
		  width:400,  //设置对话框的宽度
		  height:400,  //对话框的高度
		  resixable:false,  //是否改变的操作  false则不可以改变尺寸  true 不可以 
		  zIndex:2, //层叠的效果
		  drag:function(event,ui){
			 $("#dialog").html("文本框添加"); 
			 //可以的到当前的坐标位置
		  }
		  
	   });
	   
	   
	   //触发链接事件,当点击连接时 打开对话框
	  $("#dialog_link").click(function(){
		 $("#dialog").dialog("open");//open参数 作用 打开对话框
	  });
	  
	  //怎样获取 设置的options中的参数值
	  var modalValue=$("#dialog").dialog("option","modal");
	  alert(modalValue);
	   //我怎么设置options中的参数值
	  $("#dialog").dialog("option","modal",false);
	    
  });
</script>


相关文章推荐

模拟dialog效果

$(function(){ //注册对话框 $("#dialog").dialog({ autoOpen:false , //设置对话框的打开方式不是自动打开 ...

jquery插件——模拟dialog效果案例

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...

android dialog 模拟新浪、腾讯title弹框效果

首先我们看一下新浪微博的效果(其它就是一个dialog):                                                       点击title前      ...

Dialog实现3D翻转效果,DialogFlipDemo

  • 2017年10月21日 14:56
  • 19.27MB
  • 下载

dialog实现tabhost效果

  • 2017年04月06日 14:05
  • 2.78MB
  • 下载

16. android dialog ——列表项带图标的列表对话框、模拟菜单项带图标

1、将TextView装载到列表项中去就可以实现带图标的列表项,这里需要借助BaseAdapter适配器来实现,然后通过getView将TextView返回就OK。设置图片资源到TextView需要用...

android dialog向上弹效果

  • 2014年11月19日 15:08
  • 1.15MB
  • 下载

多种dialog 动画效果

  • 2015年12月15日 09:09
  • 6.55MB
  • 下载

android dialog省市区三级联动滚动选取效果

android上做滚动选取的效果是没有原生的控件,我做这个滚动选取的小过失用的是大神整理好的插件,如图是插件的相关的类 轮子有了做效果是比较容易的,无非就是设置数据和显示,为了自己项目中用着方便,我...

好看的Dialog,带有动态效果

  • 2015年12月13日 00:08
  • 1.01MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟dialog效果
举报原因:
原因补充:

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