在 HTML 网页中以排序方式显示数据是一项繁琐的任务。对话框用于在网页中以可呈现的方式显示信息。对话框是一个可浮动窗口，其中包含标题和内容。 jQuery UI 使开发人员能够为网站创建简单且用户友好的对话框。在本文中，我们将讨论如何创建 jQuery UI 对话框以及如何消除这些框中的关闭按钮。
首先，让我们了解一下 jQuery UI 对话框。
jQuery UI 对话框
jQuery Dialog() 方法使开发人员能够在视口中创建一个简单的对话框窗口，该窗口不受页面内容的影响。 dialog() 方法用于告诉浏览器任何HTML元素都可以以对话框的形式显示。它由标题栏和内容空间组成。默认情况下，可以通过关闭按钮 (x) 对其进行移动、调整大小和删除。
语法
$(selector, context).dialog (options);
参数
标题− 它使开发人员能够决定对话框中显示的标题。
立即学习“前端免费学习笔记（深入）”；
宽度– 它使开发人员能够决定对话框的宽度。
位置– 它使开发人员能够决定对话框的初始位置。
高度– 它使开发人员能够决定对话框的高度。
按钮– 用于向对话框添加按钮。
Max-height – 确定对话框的最大高度
Max-width – 确定对话框的最大宽度
Min-height – 确定对话框的最小高度
Min-width – 确定对话框的最小宽度
Appendto – 将此选项设置为 false 时，它使我们能够阻止 UIdraggable 类添加到 HTML DOM 元素列表中。
自动打开– 将此选项保留为 true 时，对话框将在创建后立即打开。如果为 false，则调用时会打开对话框。
应遵循的步骤
以下是创建 JQuery 对话框应遵循的步骤。
第 1 步 – 将 jQuery 和 jQuery UI CDN 添加到 标记内的代码中。相反，您也可以将它们下载到本地系统。
第 2 步 – 创建任何将成为对话框的 HTML 元素（如 div、p 等）并设置其 id。现在，使用 jQuery UIdialog() 方法创建一个对话框。
步骤 3 – 创建一个按钮，单击该按钮将显示对话框。编写函数以在 标记内单击时打开对话框。设置autoopen: false，以便单击按钮时打开对话框。
第 4 步 – 使用 CSS 设计按钮和对话框的样式。
示例
以下示例说明如何创建简单的 jQuery UI 对话框。
jQuery UI Dialog Box .ui-widget-header,.ui-state-default, ui-button{ background: green; border: 3px solid black; color: white; font-weight: 900; letter-spacing: 1px; font-family: helvetica; } #button{ position: absolute; left: 40%; margin: 12px; padding: 12px; border: 2px solid black; font-weight: bold; letter-spacing: 1.5px; } $(function() { $("#demo").dialog({ autoOpen: false, }); $("#button").click(function() { $("#demo").dialog( "open" ); }); });An e-learning platform for Computer Science.
如您所见，默认情况下，我们在对话框上显示一个关闭按钮。接下来，如果你想删除关闭按钮，我们将使用CSS。
从 jQuery UI 对话框中删除关闭按钮
只需将 ui-dialog-titlebar-close 的 display 属性值设置为 none 即可删除 jQuery UI 对话框中的关闭按钮。
语法
.ui-dialog-titlebar-close { display: none;}
应遵循的步骤
以下是要遵循的步骤
第 1 步 – 将 jQuery 和 jQuery UI CDN 添加到 标记内的代码中。相反，您也可以将它们下载到本地系统。
第 2 步 – 创建任何将成为对话框的 HTML 元素（如 div、p 等）并设置其 id。现在，使用 jQuery UIdialog() 方法创建一个对话框。
步骤 3 – 创建一个按钮，单击该按钮将显示对话框。编写函数以在 标记内单击时打开对话框。
步骤 4 – 使用 CSS 设计按钮和对话框的样式。使用类选择器“.ui-dialogtitlebar-close”并将其显示属性设置为none。
示例
以下示例演示如何从 jQuery UI 对话框中消除关闭按钮。
jQuery UI Dialog Box .ui-widget-header,.ui-state-default, ui-button{ background: green; border: 3px solid black; color: white; font-weight: 900; letter-spacing: 1px; font-family: helvetica; } #button{ position: absolute; left: 40%; margin: 12px; padding: 12px; border: 2px solid black; font-weight: 900; letter-spacing: 1.5px; } .ui-dialog-titlebar-close { display: none; } $(function() { $("#demo").dialog({ autoOpen: false, }); $("#button").click(function() { $("#demo").dialog( "open" ); }); });An e-learning platform for Computer Science.
结论
对话框是有助于用户交互的小型图形窗口。它使开发人员能够与用户沟通并接收他们的响应。有多种方法可以创建此类对话框。在本文中，我们使用 jQuery UI 创建一个对话框。另外，我们还讨论了从 jQuery UI 对话框中删除关闭按钮（默认显示）的方法。
以上就是如何使用 CSS 消除 jQuery UI 对话框中的关闭按钮？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1626190.html
微信扫一扫 
支付宝扫一扫 
