本文概述

• 第一种方法
• jQuery UI对话框示例1
• jQuery UI对话框示例2
• jQueryUI对话框示例3
• 第二种方法
• jQuery UI对话框示例4

该对话框用于在HTML页面上很好地呈现信息。 jQuery UI对话框方法用于创建一个基本的对话框窗口, 该窗口位于视口中并受页面内容的保护。它具有标题栏和内容区域, 默认情况下可以使用“ x”图标进行移动, 调整大小和关闭。
句法：
你可以通过两种形式使用对话()方法：

$(selector, context).dialog (options) Method

$(selector, context).dialog ("action", [params]) Method

第一种方法

$(selector, context).dialog (options) Method

dialog（options）方法指定你可以使用对话框形式的HTML元素。在这里, options参数是一个对象, 用于指定该窗口的外观和行为。
句法：

$(selector, context).dialog(options);

你可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项, 则必须使用逗号将它们分开, 如下所示：

$(selector, context).dialog({option1: value1, option2: value2..... });

以下是可与该方法一起使用的不同选项的列表：

选项	描述
appendto	如果将此选项设置为false, 将阻止将UI可拖动类添加到所选DOM元素列表中。默认情况下, 其值为true。
autoopen	如果将此选项设置为true, 则在创建时将打开对话框。如果为false, 则在调用dialog（’ open’ ）时将打开对话框。默认情况下, 其值为true。
buttons	此选项在对话框中添加按钮。这些列为对象, 每个属性都是按钮上的文本。该值是用户单击按钮时调用的回调函数。默认情况下, 其值为{}。
closeonescape	除非将此选项设置为false, 否则当对话框具有焦点时用户按退出键时, 对话框将关闭。默认情况下, 其值为true。
closetext	此选项包含用于替换关闭按钮的默认关闭文本的文本。默认情况下, 其值为“关闭”。
dialogclass	如果将此选项设置为false, 则将阻止将UI可拖动类添加到所选dom元素列表中。默认情况下, 其值为“”。
draggable	如果将此选项设置为false, 则单击并拖动标题栏将可拖动对话框。默认情况下, 其值为true。
height	此选项设置对话框的高度。默认情况下, 其值为“ auto”。
hide	此选项用于设置关闭对话框时要使用的效果。默认情况下, 其值为null。
maxheight	此选项设置对话框的最大高度（以像素为单位）。默认情况下, 其值为false。
maxwidth	此选项设置对话框可以调整大小的最大宽度（以像素为单位）。默认情况下, 其值为false。
minheight	此选项是对话框可以调整大小的最小高度（以像素为单位）。默认情况下, 其值为150。
minwidth	此选项是对话框可调整大小的最小宽度（以像素为单位）。默认情况下, 其值为150。
modal	如果此选项设置为true, 则对话框将具有模态行为；否则, 对话框将变为模态行为。页面上的其他项目将被禁用, 即无法与之交互。模式对话框在对话框下方但在其他页面元素上方创建一个叠加层。默认情况下, 其值为false。
position	此选项指定对话框的初始位置。可以是预定义位置之一：居中（默认）, 左, 右, 上或下。也可以是2元素数组, 其左和上限值（以像素为单位）为[left, top], 或文本位置, 例如[‘ right’ , ‘ top’ ]。默认情况下, 其值为{my：“ center”, 位于：“ center”, of：window}。
resizeable	除非将此选项设置为false, 否则对话框可以在各个方向上调整大小。默认情况下, 其值为true。
show	此选项是打开对话框时要使用的效果。默认情况下, 其值为null。
title	此选项指定要显示在对话框标题栏中的文本。默认情况下, 其值为null。
width	此选项指定对话框的宽度（以像素为单位）。默认情况下, 其值为300。

jQuery UI对话框示例1让我们举一个简单的例子来演示对话框功能的用法, 该对话框功能不向dialog()方法传递任何参数。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Dialog functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0004145549-0.jpg"> < /script> < script src="http://img.readke.com/220430/0004142493-1.jpg"> < /script> < !-- CSS --> < style> .ui-widget-header, .ui-state-default, ui-button{ background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } < /style> < !-- Javascript --> < script> $(function() { $( "#dialog-1" ).dialog({ autoOpen: false, }); $( "#opener" ).click(function() { $( "#dialog-1" ).dialog( "open" ); }); }); < /script> < /head> < body> < !-- HTML --> < div id="dialog-1" title="Movie Title:Psycho (1960)"> "A boy's best friend is his mother." < /div> < button id="opener"> Open Dialog< /button> < /body> < /html>

立即测试
jQuery UI对话框示例2使用按钮, 标题和位置：
让我们以一个示例来演示对话框小部件中三个选项按钮, 标题和位置的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Dialog functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0004145549-0.jpg"> < /script> < script src="http://img.readke.com/220430/0004142493-1.jpg"> < /script> < !-- CSS --> < style> .ui-widget-header, .ui-state-default, ui-button{ background:lightgreen; border: 1px solid #b9cd6d; color: black; font-weight: bold; } < /style> < !-- Javascript --> < script> $(function() { $( "#dialog-2" ).dialog({ autoOpen: false, buttons: { OK: function() {$(this).dialog("close"); } }, title: "Movie Title:Sholey", position: { my: "left center", at: "left center" } }); $( "#opener-2" ).click(function() { $( "#dialog-2" ).dialog( "open" ); }); }); < /script> < /head> < body> < !-- HTML --> < div id="dialog-2" title="Dialog Title goes here..."> Are O Sambha:Kitna inaam rakhi hai re sarkar hum par.< /div> < button id="opener-2"> Open Dialog< /button> < /body> < /html>

立即测试
jQueryUI对话框示例3隐藏, 显示和身高的使用：
让我们以一个示例来演示隐藏, 显示和高度这些选项的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Dialog functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0004145549-0.jpg"> < /script> < script src="http://img.readke.com/220430/0004142493-1.jpg"> < /script> < !-- CSS --> < style> .ui-widget-header, .ui-state-default, ui-button{ background: lightyellow; border: 1px solid #b9cd6d; color: black; font-weight: bold; } < /style> < !-- Javascript --> < script> $(function() { $( "#dialog-3" ).dialog({ autoOpen: false, hide: "slide", show : "slide", height: 200 }); $( "#opener-3" ).click(function() { $( "#dialog-3" ).dialog( "open" ); }); }); < /script> < /head> < body> < !-- HTML --> < div id="dialog-3" title="This is a title."> This is a dialog.< /div> < button id="opener-3"> Open Dialog< /button> < /body> < /html>

立即测试
第二种方法

$(selector, context).dialog ("action", [params]) Method:

对话框（操作, 参数）方法用于在对话框上执行操作, 例如关闭对话框。该操作在第一个参数中指定为字符串, 并且可以选择使用一个或多个参数, 这些参数可以基于给定的操作使用一个或多个参数。
句法：

$(selector, context).dialog ("action", [params]);

以下是与此方法一起使用的操作的列表：

行动	描述
close()	此操作用于关闭对话框。此方法不接受任何参数。
destroy()	此操作用于完全删除对话框。这将使元素返回其初始状态。此方法不接受任何参数。
isOpen()	此操作用于检查对话框是否打开。此方法不接受任何参数。
moveToTop()	此操作用于将位置分配给相应对话框的前景（在其他对话框的顶部）。此方法不接受任何参数。
open()	此操作用于打开对话框。此方法不接受任何参数。
option(optionName)	此操作获取当前与指定的optionName关联的值。其中optionName是要获取的选项的名称。
option()	此操作将获取一个对象, 该对象包含表示当前对话框选项哈希的键/值对。此方法不接受任何参数。
option(optionName, value)	此操作设置与指定的optionName关联的对话框选项的值。
option( options)	此操作为对话框设置一个或多个选项。
widget()	此操作用于返回对话框的小部件元素；用ui-dialog类名注释的元素。此方法不接受任何参数。

jQuery UI对话框示例4让我们以一个简单的示例来演示isOpen(), open()和close()方法的用法。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Dialog functionality< /title> < link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> < script src="http://img.readke.com/220430/0004145549-0.jpg"> < /script> < script src="http://img.readke.com/220430/0004142493-1.jpg"> < /script> < !-- CSS --> < style> .ui-widget-header, .ui-state-default, ui-button{ background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } < /style> < !-- Javascript --> < script type="text/javascript"> $(function(){ $("#toggle").click(function() {($("#dialog-5").dialog("isOpen") == false) ? $("#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ; }); $("#dialog-5").dialog({autoOpen: false}); }); < /script> < /head> < body> < button id="toggle"> Toggle dialog!< /button> < div id="dialog-5" title="Dialog Title!"> Click on the Toggle button to open and cose this dialog box. < /div> < /body> < /html>

【jQuery UI对话框】立即测试

推荐阅读

• 

  医院病假条怎么写范本 医院病假条怎么写
• 

  静脉曲张晚期有哪些罕见症状 静脉曲张初期症状
• 

  叶插多肉小苗怎么护理 叶插多肉小苗怎么养护
• 

  包皮手术后系带处水肿的危害
• 

  r 情感分析结果,金牛座情感分析
• 

  肆月肆號
• 

  有心脏病的人可以食用食用油吗？
• 

  360奇酷手机屏幕失灵怎么修 360手机屏幕失灵怎么办
• 

  捷克、斯洛伐克、匈牙利和波兰等东欧国家民族成分是不是很单一？
• 

  c网投诉分析系统
• 

  嘴唇改薄手术过程
• 

  卫衣面料有哪些种类视频 卫衣面料有哪些种类
• 

  从历史上讲,吴定都苏州不到二十年又回到越国,在越长期统治下说的不是越语吗？
• 

  4396是什么梗 4396是指什么梗
• 

  猫咪下颚有小疙瘩
• 

  亲子日记第39篇（2018年3月6日，星期二，天气（多云转晴）（妈妈篇））
• 

  运动场地面用什么材料
• 

  顺嫔为什么害魏璎珞
• 

  摄影造型法则 造型手法摄影
• 

  健康码是黄码不能出门吗

• jQuery UI日期选择器
• jQuery UI按钮
• jQuery UI自动完成
• jQuery UI颜色动画
• jQuery UI addClass
• jQuery UI Accordion