如何使用 CSS 从 jQuery UI 对话框中移除关闭按钮?
在 HTML 网页中以排序的方式显示数据是一项繁琐的任务。对话框用于在网页中以美观的方式显示信息。对话框是一个可浮动的窗口，包含标题和内容。jQuery UI 使开发人员能够为网站创建简单且用户友好的对话框。在本文中，我们将讨论如何创建 jQuery UI 对话框以及如何从这些对话框中移除关闭按钮。
首先，让我们了解 jQuery UI 对话框。
jQuery UI 对话框
jQuery Dialog() 方法使开发人员能够创建一个简单的对话框窗口，该窗口显示在视口中，并与页面内容隔离。 dialog() 方法用于告知浏览器，任何 HTML 元素都可以以对话框的形式显示。它由标题栏和内容空间组成。默认情况下，可以通过关闭按钮 (x) 移动、调整大小和移除。
语法
$(selector, context).dialog (options);
参数
Title− 它使开发人员能够决定对话框中显示的标题。
Width − 它使开发人员能够决定对话框的宽度。
Position − 它使开发人员决定对话框的初始位置。
Height − 开发人员可以决定对话框的高度。
Buttons − 用于向对话框添加按钮。
Max-height − 确定对话框的最大高度
Max-width − 确定对话框的最大宽度
Min-height − 确定对话框的最小高度
Min-width − 确定对话框的最小宽度
Appendto − 将此选项设置为 false，可以阻止 UIdraggable 类添加到 HTML DOM 元素中列表。
Autoopen − 如果将此选项设置为 true，对话框将在创建后立即打开。如果设置为 false，对话框将在调用时打开。
步骤
以下是创建 JQuery 对话框的步骤。
步骤 1 − 将 jQuery 和 jQuery UI CDN 添加到代码中的 <script> 标签内。您也可以将它们下载到本地系统。
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script> <script src= "http://code.jquery.com/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= "http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "http://code.jquery.com/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 − 将 jQuery 和 jQuery UI CDN 添加到代码中的 <script> 标签内。您也可以将它们下载到本地系统。
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script> <script src= "http://code.jquery.com/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= "http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jqueryui.css" rel= "stylesheet">
<script src= "http://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "http://code.jquery.com/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 对话框中移除关闭按钮(默认显示)的方法。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
