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

PHPz 转载: 2023-09-17 10:01:02 1089浏览

在 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 添加到

<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 UIdialog() 方法创建一个对话框。

步骤 3 - 创建一个按钮，单击该按钮将显示对话框。编写函数以在

第 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 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 UIdialog() 方法创建一个对话框。

步骤 3 - 创建一个按钮，单击该按钮将显示对话框。编写函数以在

步骤 4 - 使用 CSS 设计按钮和对话框的样式。使用类选择器“.ui-dialogtitlebar-close”并将其显示属性设置为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>