如何使用 CSS 消除 jQuery UI 对话框中的关闭按钮?

PHPz
发布: 2023-09-17 10:01:02
转载
1434명이 탐색했습니다.

如何使用 CSS 消除 jQuery UI 对话框中的关闭按钮?

在 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 - 创建一个按钮,单击该按钮将显示对话框。编写函数以在

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 - 创建一个按钮,单击该按钮将显示对话框。编写函数以在

An e-learning platform for Computer Science.
登录后复制

结论

对话框是有助于用户交互的小型图形窗口。它使开发人员能够与用户沟通并接收他们的响应。有多种方法可以创建此类对话框。在本文中,我们使用 jQuery UI 创建一个对话框。另外,我们还讨论了从 jQuery UI 对话框中删除关闭按钮(默认显示)的方法。

위 내용은 如何使用 CSS 消除 jQuery UI 对话框中的关闭按钮?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

来源:tutorialspoint.com
上一篇:使用 CSS 设置每个启用元素的样式 下一篇:"CSS在幕后是如何工作的?"
본 웹사이트의 성명
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
来自于 2024-04-16 10:10:18
0
0
609
相关专题
더>
热门推荐
热门教程
더>
最新下载
더>
网站特效
网站源码
网站素材
프론트엔드 템플릿
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!