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>
<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>
<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 id="dialog" title="hi!">
hello world!
</div>
</body>
</html>

时间： 2024-08-27 07:18:05

jquery ui 弹窗效果的相关文章

jQuery Mobile弹窗效果

<div data-role="header" data-theme="a" class="themeBackground"> <a href="#windows" data-rel="popup" data-role="none"><img src="../static/icon/shaixuan.png" style="fl

官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/ DatePicker基本使用方法: 代码如下: <!DOCTYPE html> <html> <head> <link href="http://ajax.g

JQuery UI datepicker 使用方法(转)

【Android UI设计与开发】第14期：顶部标题栏（五）两种方式实现仿微信标题栏弹窗效果

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9093821 博主在这篇文章中将会继续围绕顶部标题栏专题来进行实例讲解,今天要讲解的主题是分别使用PopupWindow和Activity两种不同的方式来实现仿微信顶部标题栏弹窗的这样一个效果. 一.实现效果图这里为了演示方便,我将两种方法放在一个应用程序中演示,这个是主界面虽然两种实现的方式不一样,但是最终的效果图都是差不多的二.项目结构图

jquery ui autocomplete 实现点击文本框，出现所有查询信息效果

直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jqu

jQuery UI datepicker z-index默认为1 怎么处理

最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-index比1大的标签.我在网上搜了一下,发现有好多人都遇到了同样的问题.解决方法大体上有两种. 下面我结合demo,一起看一下. 我们先按照jQuery UI datepicker API 文档(地址我就不写了,应该能搜得到)写一个基本的demo,body中的代码如下: 1 <body> 2 3 <

16种基于 CSS3 & SVG 的创意的弹窗效果

在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画,还有一些应用了SVG变形技术. 在线演示源码下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白

jQuery UI

1.jQuery UI: 是以jQuery为基础的JavaScript网页用户界面的开源库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.2.jQuery UI : 包含了许多维持状态的小部件(Widget),因此,他与定性的jQuery插件使用模式略有不同.所有的jQuery UI 小部件(Widget)使用相同的模式,所以,只要学会使用其中一个,就知道如何使用其他小部件(Widget).3.jQuery UI: IE 6.0+ ,

jQuery基础（常用插件表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

1.表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. 2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option