jQuery UI弹窗效果

原创 2012年03月28日 19:55:03

jQuery UI弹窗效果,很基本,介绍的也很详细,大家一起来学习吧!

<!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>模拟dialog效果</title>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">
$(function (){
	
		$("#dialog").dialog({
			   autoOpen:false,  //设置对话框打开的方式 不是自动打开
			   show:"blind",	//打开时的动画效果
			   hide:"explode",    //关闭是的动画效果
			   modal:true,     		//true代表运用遮罩效果
/*			   buttons:{		//添加按钮的操作
				   "确定":function (){
							$(this).dialog("close");//关闭对话框
					   },
					"取消":function (){
							$(this).dialog("close");
						}
				   
				   },
				   //上边是第一种方式
				   
				   //下边是第二种方式
				   */
				buttons:[
					{
						text:"Ok",
						click:function (){
							$(this).dialog("close");//关闭对话框
						}
					},
						{
						text:"取消",
						click:function (){
							$(this).dialog("close");//关闭对话框
						}
					}],
				draggable:false,   //是否可以拖动的效果  true可以拖动  默认值是true    ,false代表不可以拖动
				closeOnEscape:false,   //是否采用esc键退出对话框,如果为false则不采用 ,true则采用
				title:"添加用户操作",    //对话框的标题
				position:"top",			//对话框打开的位置,默认center,有top、left、right、center、bottom
				width:600,		//设置对话框的宽度
				height:300,		//设置对话框的高度
				resizable:false,   //是否可以改变对话框的尺寸的操作,默认true			
				zIndex:1000,    //层叠效果
				drag:function(event,ui){
						//可以测试出 对话框当前的坐标位置
						
					}
			});
		
		//触发连接的事件   当你点击 连接  打开一个对话框
		$("#dialog_link").click(function (){
			
			$("#dialog").dialog("open");  //open参数  作用  打开对话框
			});
		
		//我怎么获取 我设置的options中的参数值
		var modalValue = $("#dialog").dialog("option","modal");
		alert(modalValue);
		
		//我怎么设置options中的参数值
		$("#dialog").dialog("option","modal",false);
	});



</script>
</head>

<body>
	<h2>模拟dialog效果</h2>
    <!--创建一个连接-->
    <a href="javascript:void(0)" id="dialog_link"><span></span>open dialog</a>
    
    <!--注册一个div  $("#dialog").dialog(); 它就成了一个对话框 在页面中就会隐藏-->
    <div id="dialog" title="hi!">
    		hello world!
    </div>
</body>
</html>


效果图:

JQuery+JQuery ui实现的弹出窗口

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>DOCTYPE...

jquery ui实现弹窗效果

出处:http://miniui.com/demo/#src=datagrid/datagrid.html http://blog.csdn.net/wxlhlh001/article/details...

js制作一个简单的div弹窗:

js制作一个简单的div弹窗: 演示地址:http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ ...

JSP中JQuery UI Dialog弹窗使用具体操作

本文简单介绍了JQuery-UI-Dialog弹窗的使用方法。
  • can8888
  • can8888
  • 2016年06月15日 22:43
  • 206

如何控制jquery ui弹窗下方按钮水平居中

1、问题背景     一般情况下,jquery ui弹窗下方的按钮是居右的,但是有时系统为了达到美观统一,需要将按钮放在中间2、问题原因 如何使jquery ui弹窗下方按钮水平居中 ...

强大的jQuery UI——学习手风琴效果

今天初次体验了一把jQuery UI,深刻体会到了它的强大之处,以下代码是实现手风琴的效果,需要引入相应的js类库,大家可去官网下载UI插件http://jquery.com/,为了方便,我将jque...

利用jQuery UI为CMS网站实现拖拽布局效果,秒杀table布局

其实table和div这两种布局方式是互为优劣的。但是目前来说div越来越成为一种主流设计方式,其布局效果灵活、样式新颖的特点也越来越受到青睐。而且这里我们所讲的,如果你想使用拖拽的方式轻松实现页面布...

JQuery UI简单增加表单信息效果

刚开始学习JQuery UI,自己写了个简单的表单信息的插入,没有做验证,也很简单,和大家分享一下: 添加用户 #table1{ border-collapse:colla...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery UI弹窗效果
举报原因:
原因补充:

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