jQuery dialog 简介
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.23.custom.css">
<script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"> </script>
<style type="text/css">
.titleClass{border:2px solid green;font-size:20px;background-color:yellow;}
</style>
<script type="text/javascript">
$(function(){
$("#dv1").dialog({
hide:true,//点击关闭时使对话框关闭(隐藏),可添加动画效果,如:hide:"slide"
autoOpen:false, //true时,默认页面加载完毕后自动弹出对话框
closeOnEscape:true,//当对话框打开时,用户按Esc键是否关闭对话框
dialogClass:'titleClass',//为对话框设置指定的样式类名称
height:380,//还可以 height:auto
width:300,
modal:true,//是否为模式窗口
title:'测试一下',
draggable:true,//是否允许拖动对话框的标题栏移动窗口
position:'center',//设置对话框的初始显示位置,可选值:'center','left','right','top','bottom',或是一个数组['right','top']
resizable:true,//对话框是否可调整大小
show:'slide',//显示对话框的方式
stack:true,//移动时对话框是否前置于其他对话框前面
zIndex:1000,//设置对话框的zIndex值,还可以:zIndex:Integer
overlay:{opacity:0.5,background:"black",overflow:'auto'},
buttons:{
'确定':function(){
//处理方法
//AddUser();
alert("你点击了添加按钮");
},
'取消':function(){
//关闭当前dialog
$(this).dialog('close');
}
}
})
$("#dv2").dialog({
autoOpen:true,
height:400,
buttons:{'OK':function(){},"Cancel":function(){}}
}) $("#btn").button().click(function(){ //此处的button()函数是jQueryUI中定义的函数,表示使用jQuery中button样式
$("#dv1").dialog("open");
}) $("#btn_2").button().click(function(){
$("#dv2").dialog("open");
}) $(".btn").click(function(){
$("#dv1").dialog("open");
})
}) </script>
</head> <body>
<input class="btn" type="button" value="点击一下试试"/>
<button id="btn" >点击一下试试_Button</button>
<button id="btn_2">点击一下试试_Button_2</button>
<div id="dv1">
<fieldset> <!-- fieldset 元素可将表单内的相关元素分组 -->
<legend>请填写信息</legend> <!-- <legend>标签为fieldset元素定义标题 -->
<label for="name">Name</label> <!-- <label>标签的for属性规定label与哪个表单元素绑定 -->
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset> </div>
<div id="dv2">
<fieldset>
<legend>请再次确认信息</legend>
<label for="name">Name_2</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email_2</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password_2</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</div>
</body>
</html>
jQuery dialog 简介的更多相关文章
- jquery dialog open后,服务器端控件失效的快速解决方法
jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的op ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- JQuery Dialog 禁用X按钮关闭对话框,-摘自网络
JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({ closeOnEscape: false, open: ...
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- 使用jquery dialog
网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… ...
- jquery dialog的一些坑
jquery dialog工具可以方便的生成一个弹出框,但是在一些需要多个弹出框的应用场景上会有一些bug 具体场景: 当使用过一次模态框之后,使用另外的一个模态框时,已经消失不见的模态框会重新出来 ...
- Jquery 内容简介
内容简介 内容简介 • 什么是Jquery • 万能的选择器 • 管理jQuery包装集 • 使用jQuery操作元素的属性与样式 • 事件与事件对象 • jQuery中的Ajax • jQuery ...
- jQuery.dialog
本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...
- JQUERY dialog的用法详细解析
本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...
随机推荐
- 转 java int与Integer的区别
int是java提供的8种原始数据类型之一, Java为每个原始类型提供了封装类,Integer是java为int提供的封装类. int 是基本类型,Integer是引用类型. java.lang.I ...
- mysql命令行登录指定编码
mysql --default-character-set=utf8 -uroot -p mysql --default-character-set-utf8 -uroot-p
- phalcon: 过滤(Phalcon\Filter())
过滤,就是清除不需要的数据,留下想要的数据. 其调用方法如下,一: $filter = new \Phalcon\Filter(); $filter->sanitize("some(o ...
- CFX客户端调用报错
Exception in thread "main" javax.xml.ws.soap.SOAPFaultException: Unmarshalling Error: unex ...
- 20145218 《Java程序设计》课程总结
20145218 <Java程序设计>课程总结 每周读书笔记链接汇总 20145218<Java程序设计>第一周学习总结 20145218<Java程序设计>第二周 ...
- js 继承inheritance/extends
主要就是<javascript语言精粹>语言精粹中的内容 5.1伪类 Function.prototype.method = function(name,func){ this.proto ...
- Java GC系列(4):垃圾回收监视和分析
本文由 ImportNew - lomoxy 翻译自 javapapers. 目录 垃圾回收介绍 垃圾回收是如何工作的? 垃圾回收的类别 垃圾回收监视和分析 在这个Java GC系列教程中,让我们学习 ...
- java多线程的常用方法(以及注意事项)
/* * 线程的常用方法 * 1.start(); * 2.run(); * 3.sleep(int millsecond); * 4.isAlive(); -->判断线程是否还在运行 * 5. ...
- spring关于urlpattern
视图解析器(ViewResolver)注册中央调度器定制处理器jsp页面搭建springmvc.xml配置效果图第一个案例提升----视图解析器关于urlpattern说法最好配成*.do 不能配成/ ...
- postgres 正则表达式
PostgreSQL正则表达式 基础: Operator Description Example ~ Matches regular expression, case sensitive 'thoma ...