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时，它使我们能够阻止Idraggable类添加到HTML DOM元素列表中。
Autoopen – 将该选项设为 “true “时，对话框会在创建后立即打开。而如果它是假的，对话框将在被调用时打开。

应遵循的步骤

以下是创建一个JQuery对话框的步骤。

第1步 - 在<script>标签中添加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 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 “并将其显示属性设置为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>