How to remove close button from jQuery UI dialog using CSS ? ❤️

In this article, we will learn how to remove the close button on the jQuery UI dialog using CSS. This can be achieved by setting the display property of the ui-dialog-titlebar-close class element to none. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dialog box to retrieve user input, prompt the user for additional information for menu items.

Syntax:

$("Selector").dialog();

We will see how to create a jQuery UI dialog, along with understanding its implementation. Here, we will use the CDN links to accomplish this task, you can download the jQuery from their official website.

Approach:

Firstly, add the jQuery and jQuery UI CDN to the script or download them to your local machine.

<script src=”http://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”></script>
Create a div (in the body) for the dialog box and keep id as demoDialog. Now, using the jQuery dialog() method, create the jQuery UI dialog.
```
$("#demoDialog").dialog();
```

Example: This example illustrates the dialog box with a close button.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>jQuery UI Dialog : demo dialog</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css"> 
    <script src= 
"http://code.jquery.com/jquery-2.1.3.js"> 
    </script> 
    <script src= 
"http://code.jquery.com/ui/1.11.2/jquery-ui.js"> 
    </script> 
      
    <script> 
        $(document).ready(function() { 
            $("#demoDialog").dialog(); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1> Dialog Widget with Close button</h1> 
    <div id="demoDialog" title="My Dialog Box"> 
        <p>Welcome to w3wiki</p> 
    </div> 
</body> 
  
</html>

Output:

jQuery UI dialog

Here, we will see how to remove the close button on the jQuery UI dialog using CSS.

Syntax:

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

Approach: By setting the display property of the ui-dialog-titlebar-close class element to none.

Firstly, add the jQuery and jQuery UI CDN to the script or download them to your local machine.

<script src=”http://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”></script>
Create a div (in the body) for the dialog box and keep id as demoDialog. Now, using the jQuery dialog() method, create the jQuery UI dialog.
```
$("#demoDialog").dialog();
```

Now, using the class selector, select .ui-dialog-titlebar-close and hide it by setting the display property as none.

Example: This example illustrates the removing the close button from the dialog box using CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>jQuery UI Dialog : demo dialog</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css"> 
    <script src= 
"http://code.jquery.com/jquery-2.1.3.js"> 
    </script> 
    <script src= 
"http://code.jquery.com/ui/1.11.2/jquery-ui.js"> 
    </script> 
      
    <script> 
        $(document).ready(function() { 
            $("#demoDialog").dialog(); 
        }); 
    </script> 
    <style> 
        .ui-dialog-titlebar-close { 
            display: none; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> Dialog Widget without Close button</h1> 
    <div id="demoDialog" title="My Dialog Box"> 
        <p>Welcome to w3wiki</p> 
    </div> 
</body> 
  
</html>

Output:

How to remove close button from jQuery UI dialog using CSS ?

HTML

HTML

Contact Us