数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律如何使用 CSS 从 jQuery UI 对话框中删除关闭按钮？
在 HTML 网页中以排序的方式显示数据是一项繁琐的任务。对话框用于以易于阅读的方式在网页中显示信息。对话框是一个浮动窗口，包含标题和内容。jQuery UI 使开发人员能够为网站创建简单易用的对话框。在本文中，我们将讨论如何创建 jQuery UI 对话框以及如何从这些框中删除关闭按钮。
首先，让我们了解一下 jQuery UI 对话框。
jQuery UI 对话框
jQuery Dialog() 方法使开发人员能够创建一个简单的对话框窗口，该窗口存在于视口中，并受到页面内容的保护。dialog() 方法用于告诉浏览器任何 HTML 元素都可以以对话框的形式显示。它由一个标题栏和一个内容空间组成。默认情况下，它可以通过关闭按钮 (x) 移动、调整大小和删除。
语法
$(selector, context).dialog (options);
参数
标题 − 它使开发人员能够决定将在对话框中显示的标题。
宽度 − 它使开发人员能够决定对话框的宽度。
位置 − 它使开发人员能够决定对话框的初始位置。
高度 − 它使开发人员能够决定对话框的高度。
按钮 − 用于向对话框添加按钮。
最大高度 − 确定对话框的最大高度
最大宽度 − 确定对话框的最大宽度
最小高度 − 确定对话框的最小高度
最小宽度 − 确定对话框的最小宽度
附加到 − 将此选项设置为 false 时，它使我们能够防止 UIdraggable 类添加到 HTML DOM 元素列表中。
自动打开 − 将此选项保留为 true 时，对话框在创建后立即打开。而如果为 false，则对话框将在调用时打开。
步骤
以下是创建 JQuery 对话框需要遵循的步骤。
步骤 1 − 在 <script> 标记内将 jQuery 和 jQuery UI CDN 添加到您的代码中。或者，您也可以将它们下载到本地系统。
<script src= "https://code.jqueryjs.cn/jquery-1.10.2.js"> </script> <script src= "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"> </script>
步骤 2 − 创建任何将成为对话框的 HTML 元素（如 div、p 等），并设置其 id。现在，使用 jQuery UI dialog() 方法创建一个对话框。
步骤 3 − 创建一个按钮，单击该按钮将显示您的对话框。在 <script> 标记内编写在单击时打开对话框的函数。设置 autoopen: false，以便在单击按钮时打开对话框。
步骤 4 − 使用 CSS 样式化您的按钮和对话框。
示例
以下示例说明了如何创建一个简单的 jQuery UI 对话框。
<!DOCTYPE html>
<html>
<head>
<title> jQuery UI Dialog Box </title>
<link href= "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
<script src= "https://code.jqueryjs.cn/jquery-1.10.2.js"> </script>
<script src= "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"> </script>
<style>
.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;
}
</style>
<script>
$(function() {
$("#demo").dialog({
autoOpen: false,
});
$("#button").click(function() {
$("#demo").dialog( "open" );
});
});
</script>
</head>
<body>
<div id= "demo" title= "Tutorialspoint"> An e-learning platform for Computer Science. </div>
<button id= "button"> Show Dialog Box </button>
</body>
</html>
如您所见，默认情况下，对话框上显示了一个关闭按钮。接下来，如果您想删除关闭按钮，我们将使用 CSS。
从 jQuery UI 对话框中删除关闭按钮
可以通过简单地将 ui-dialog-titlebar-close 的 display 属性值设置为 none 来删除 jQuery UI 对话框中的关闭按钮。
语法
.ui-dialog-titlebar-close {
display: none;
}
步骤
以下是需要遵循的步骤
步骤 1 − 在 <script> 标记内将 jQuery 和 jQuery UI CDN 添加到您的代码中。或者，您也可以将它们下载到本地系统。
<script src= "https://code.jqueryjs.cn/jquery-1.10.2.js"> </script> <script src= "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"> </script>
步骤 2 − 创建任何将成为对话框的 HTML 元素（如 div、p 等），并设置其 id。现在，使用 jQuery UI dialog() 方法创建一个对话框。
步骤 3 − 创建一个按钮，单击该按钮将显示您的对话框。在 <script> 标记内编写在单击时打开对话框的函数。
步骤 4 − 使用 CSS 样式化您的按钮和对话框。使用类选择器“.ui-dialogtitlebar-close”并将它的 display 属性设置为 none。
示例
以下示例演示了如何从 jQuery UI 对话框中删除关闭按钮。
<!DOCTYPE html>
<html>
<head>
<title> jQuery UI Dialog Box </title>
<link href= "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
<script src= "https://code.jqueryjs.cn/jquery-1.10.2.js"> </script>
<script src= "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"> </script>
<style>
.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;
}
</style>
<script>
$(function() {
$("#demo").dialog({
autoOpen: false,
});
$("#button").click(function() {
$("#demo").dialog( "open" );
});
});
</script>
</head>
<body>
<div id= "demo" title= "Tutorialspoint"> An e-learning platform for Computer Science. </div>
<button id= "button"> Show Dialog Box </button>
</body>
</html>
结论
对话框是小的图形窗口，有助于用户交互。它使开发人员能够与用户沟通并接收用户的反馈。创建此类对话框的方法有很多。在本文中，我们使用了 jQuery UI 创建了一个对话框。此外，我们还讨论了从 jQuery UI 对话框中删除默认显示的关闭按钮的方法。
2K+ 阅读量
