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

在本文中，我们将学习如何使用 CSS 移除 jQuery UI 对话框上的关闭按钮。这可以通过将ui-dialog-titlebar-close类元素的 display 属性设置为 none 来实现。 jQuery 用户界面 是在 jQuery JavaScript 库之上构建的一组精选的用户界面交互、效果、小部件和主题。 对话框是一个临时窗口。应用程序创建一个对话框来检索用户输入，提示用户输入菜单项的附加信息。

句法：

$("Selector").dialog();

我们将看到如何创建一个 jQuery UI 对话框，以及理解它的实现。在这里，我们将使用 CDN 链接来完成此任务，您可以从他们的官方网站下载 jQuery。

方法：

• 首先，将 jQuery 和 jQuery UI CDN 添加到脚本中或将它们下载到本地计算机。

  
  

• 为对话框创建一个 div（在正文中）并将 id 保持为demoDialog 。现在，使用 jQuery dialog() 方法，创建 jQuery UI 对话框。

  $("#demoDialog").dialog();

示例：此示例说明了带有关闭按钮的对话框。

HTML

  

    jQuery UI Dialog : demo dialog
    
    
    
    
    
    
      
    
        $(document).ready(function() {
            $("#demoDialog").dialog();
        });
    

  

     Dialog Widget with Close button
    
        Welcome to GeeksforGeeks
    

  

输出：

jQuery UI 对话框

在这里，我们将看到如何使用 CSS 移除 jQuery UI 对话框上的关闭按钮。

句法：

.ui-dialog-titlebar-close {
    display: none;
}

方法：通过将ui-dialog-titlebar-close类元素的 display 属性设置为none。

• 首先，将 jQuery 和 jQuery UI CDN 添加到脚本中或将它们下载到本地计算机。

  
  

• 为对话框创建一个 div（在正文中）并将 id 保持为demoDialog 。现在，使用 jQuery dialog() 方法，创建 jQuery UI 对话框。

  $("#demoDialog").dialog();

现在，使用类选择器，选择.ui-dialog-titlebar-close并通过将 display 属性设置为 none 来隐藏它。

示例：此示例说明使用 CSS 从对话框中删除关闭按钮。

HTML

  

    jQuery UI Dialog : demo dialog
    
    
    
    
    
    
      
    
        $(document).ready(function() {
            $("#demoDialog").dialog();
        });
    
    
        .ui-dialog-titlebar-close {
            display: none;
        }
    

  

     Dialog Widget without Close button
    
        Welcome to GeeksforGeeks
    

  

输出：