模拟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 , //设置对话框的打开方式不是自动打开 ...
  • dunyanan1
  • dunyanan1
  • 2012年03月28日 17:50
  • 668

jquery学习模拟Dialog效果

效果                  $(function(){       $("#dialog").dialog({  autoOpen:false,  //设置对话...
  • zl943588435
  • zl943588435
  • 2012年03月28日 17:36
  • 1217

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

jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:22
  • 682

Dialog 自定义一些常见效果

Dialog 自定义一些常见效果
  • u014608640
  • u014608640
  • 2016年09月18日 11:24
  • 567

模式对话框PopupWindow实现Dialog的功能

Popupwindow作为与Dialog有同等功能的对话框,Popupwindow现在完全实现Dialog的功能,背景变灰...
  • dreamInTheWorld
  • dreamInTheWorld
  • 2014年11月17日 13:45
  • 2352

android中模拟对话框按钮的点击

因为业务要求,需要在程序中模拟点击对话框中的按钮 难度不大,就是按钮的模拟点击 代码如下 package com.qefee.testcanclealertdialog; import...
  • aotian16
  • aotian16
  • 2013年07月18日 15:50
  • 4015

android 仿QQ列表可折叠+自定义Dialog结合的DEMO

如上图,类似QQ好友分组点击效果。demo下载
  • onceing
  • onceing
  • 2015年07月06日 16:23
  • 681

自定义一些常见的Dialog效果

自定义一些常见的Dialog效果,居中显示、顶部显示、仿IOS版淘宝、回弹效果、宽度和高度占屏比等...
  • as_csdn
  • as_csdn
  • 2016年10月28日 17:14
  • 505

一个不错的CSS模拟的按钮效果

代码如下:
  • AppleBBS
  • AppleBBS
  • 2005年06月04日 00:29
  • 1400

Dialog的回退按钮的点击事件

onBackPressed() package com.example.administrator.dialogtestpressback; import android.app.Dial...
  • Rodulf
  • Rodulf
  • 2016年07月18日 19:52
  • 690
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:模拟dialog效果
举报原因:
原因补充:

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