dialog是jQuery UI 库的一个UI组件，所以使用dialog时，不仅要引入jQuery.js(因为它只是轻量级的基础框架)，还需要引入jQueryUI的js及相关css文件
示例：
<!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>
----------------label标签for属性补充说明-----------------
显示联系：
　　<label for="test">姓名：<label>
　　<input type = "text" id ="test" />
隐式联系：
　　<label>姓名：<input type="text" /></label>
--------------------------------------------------------------
1 属性（对上面的补充）
1.1 autoOpen ，为true时dialog被调用的时候自动打开dialog窗口。当属性为false时，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。
1.2 bgiframe 默认为false ， 如果设置为 true ，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。在IE6下，让后面那个灰屏盖住select。
1.3 buttons 显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。
1.4 maxWidth、maxHeight、minWidth、minHeight ，dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false，为不限。minWidth、 minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。
1.5 hide、show ，当dialog关闭和打开时候的效果。默认为null，无效果
1.6 modal,是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默认为false不是模式窗口。
1.7 title，dialog的标题文字，默认为空。
1.8 position ，dialog的显示位置：可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
1.9 zIndex, dialog的zindex值，默认值为1000.
1.10 stack 默认值为true，当dialog获得焦点是，dialog将在最上面。
 
属性说明（以autoOpen属性为例）：
初始：$("#dv1").dialog({ autoOpen:false });
获取：var autoOpen = $("#dv1").dialog('option','autoOpen');
设置：$('#dv1').dialog('option','autoOpen',false);
 
2 事件
2.1 beforeclose 类型dialogbeforeclose ，当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止。
2.2 close 类型：dialogclose ，当dialog被关闭后触发此事件。
2.3 open 类型：dialogopen ，当dialog打开时触发。
2.4 focus 类型：dialogfocus ，当dialog获得焦点时触发。
2.5 dragStart 类型：dragStart，当dialog拖动开始时触发。
2.6 drag 类型：drag ，当dialog被拖动时触发。
2.7 dragStop 类型：dragStop ，当dialog拖动完成时触发。
2.8 resizeStart 类型：resizeStart ，当dialog开始改变窗体大小时触发。
2.9 resize 类型：resize，当dialog被改变大小时触发。
2.10 resizeStop 类型：resizeStop，当改变完大小时触发。
 
事件说明（以close事件为例）：
初始：$('.selector').dialog({   close: function(event, ui) { ... }     });
使用类型绑定：$('.selector').bind('dialogclose', function(event, ui) {     ...    });
 $("#dialog").dialog({autoOpen:false,buttons: {"确定":function() {$(this).dialog("close");}},closeOnEscape:true,hide:"slide",modal:true,title:" 对话 框"}).dialog("open"); 
 
3 方法
3.1 destroy ，销毁对话框对象
3.2 disable，dialog不可用，
3.3 enable,dialog可用
3.4 close，open，关闭、打开dialog
3.5 option ，设置和获取dialog属性，如：.dialog( 'option' , optionName , [value] ) ，如果没有value，将是获取。
3.6 isOpen ，如果dialog打开则返回true，
3.7 moveToTop ,将dialog移到最上层，
 
方法说明（以open为例）：
语法：$("dv1").dialog('open')

jQuery dialog 简介的更多相关文章

  1. jquery dialog open后,服务器端控件失效的快速解决方法

    jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的op ...

  2. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  3. JQuery Dialog 禁用X按钮关闭对话框，-摘自网络

    JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({   closeOnEscape: false,   open: ...

  4. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  5. 使用jquery dialog

    网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… ...

  6. jquery dialog的一些坑

    jquery dialog工具可以方便的生成一个弹出框,但是在一些需要多个弹出框的应用场景上会有一些bug 具体场景: 当使用过一次模态框之后,使用另外的一个模态框时,已经消失不见的模态框会重新出来 ...

  7. Jquery 内容简介

    内容简介  内容简介 • 什么是Jquery • 万能的选择器 • 管理jQuery包装集 • 使用jQuery操作元素的属性与样式 • 事件与事件对象 • jQuery中的Ajax • jQuery ...

  8. jQuery.dialog

    本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...

  9. JQUERY dialog的用法详细解析

    本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...

随机推荐

  1. chmod修改文件的权限/chown修改文件和目录的所有者

    ll指令的显示的信息为(当前目录下只有nameservice1一个目录): drwxr-xr-x 3 hdfs hdfs 4096 4月 14 16:19 nameservice1 上述信息分别表示: ...

  2. idea14教程

    破解:http://blog.csdn.net/guofeng526/article/details/47043457 使用教程: http://www.phperz.com/article/15/0 ...

  3. css读书笔记3：定位元素

    定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器 ...

  4. ArcMap中"开始编辑"遇到一个或多个带有警告的图层“如果继续，可能无法编辑某些图层”的警告框

    开始编辑后可能出现的错误: 如果 ArcMap 在所选数据上启动编辑会话时遇到问题,将弹出一个对话框以提供附加信息.您可能会收到错误.警告或信息消息. 出现错误  时用户不可以启动任何编辑会话.只有解 ...

  5. 《Java程序设计》学期总结

    <Java程序设计> 学期总结 课程设计小组 -迦瓦栈队 团队博客 读书笔记汇总 第一周 第二周 第三周 第四周 第五周 第六周 第七周 第八周 第九周 第十周 实验报告汇总 实验一 实验 ...

  6. javaSE之如何将一个文件复制到另一个文件

    /* * (1). 文件字符输入,输出流 * 文件字节输入,输出流的read和write方法使用 * 字节数组读写数据,即以字节为单位处理数据,因此,字节流不能很好的操作Unicode字符 * ,比如 ...

  7. hdu---1024Max Sum Plus Plus(动态规划)

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  8. 初学java之触发响应事件举例子

    设置一个触发响应事件? 比如消息框..... package hello; import javax.swing.*; import project.readerListen; import java ...

  9. java.lang.IllegalArgumentException: addChild: Child name '/SSHE' is not unique

    错误信息: Caused by: java.lang.IllegalArgumentException: addChild:  Child name '/SSHE' is not unique     ...

  10. 20145236 《Java程序设计》实验二实验报告

    北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1452 指导教师:娄嘉鹏 实验日期:2016.04.08 实验名称: Java面向对象程序设计 实验内容: 初步掌握单元测试和T ...