How to eliminate close button from jQuery UI dialog box using CSS?

CSS jQuery Web Development Front End Technology

Displaying data in a sorted manner within a HTML web page is a cumbersome task. The dialog boxes are used to display information in a presentable manner in a web page. A dialog box is a floatable window which contains a header and the content. jQuery UI enables the developers to create simple and user-friendly dialog boxes for the website. In this article, we will discuss about how to create jQuery UI dialog boxes as well as how to eliminate the close button from those boxes.

First, let’s understand about jQuery UI dialog boxes.

jQuery UI Dialog Box

The jQuery Dialog() method enables the developers to create a simple dialog window present in the viewport which is protected from the content of the page. The dialog() method is used to tell the browser that any HTML element can be displayed in the form of a dialog box. It is composed of a header bar and a content space. It can be moved, resized and removed by close button (x) by default.

Syntax

$(selector, context).dialog (options);

Parameters

Title − It enables the developers to decide the title which will appear in the dialog box.
Width − It enables the developers to decide the width of dialog box.
Position − It enables the developers to decide the initial position of the dialog box.
Height − It enables the developers to decide the height of dialog box.
Buttons − It is used to add buttons to the dialog box.
Max-height − determines the maximum height of dialog box
Max-width − determines the maximum width of dialog box
Min-height − Determines the minimum height of dialog box
Min-width − Determines the minimum width of dialog box
Appendto − On setting this option as false, it enables us to prevent the UIdraggable class to add in the HTML DOM elements list.
Autoopen − On keeping this option as true, the dialog box opens just after it is created. While if it is false, the dialog box will open when it is called.

Steps to be Followed

Following are the steps to be followed to create a JQuery dialog box.

Step 1 − Add jQuery and jQuery UI CDN to your code within the <script> tag. Instead, you can also download them to your local system.

<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>

Step 2 − Create any HTML element (like div, p, etc.,) which will become the dialog box and set its id. Now, use the jQuery UI dialog() method to create a dialog box.

Step 3 − Create a button which on clicking will display your dialog box. Write the function to open the dialog box on clicking within the <script> tag. Set autoopen: false, so that the dialog box opens when the button is clicked.

Step 4 − Style your button and dialog box using CSS.

Example

The following example illustrates how to create a simple jQuery UI dialog box.

<!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>

As you can see, we have a close button displayed on the dialog box by default. Next, if you want to remove the close button, we will use CSS.

Remove the close button from jQuery UI dialog box

The close button from jQuery UI dialog box can be removed by simply setting the value of display property of the ui-dialog-titlebar-close to none.

Syntax

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

Steps to be Followed

Following are the steps to be followed to

Step 1 − Add jQuery and jQuery UI CDN to your code within the <script> tag. Instead, you can also download them to your local system.

<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>

Step 2 − Create any HTML element (like div, p, etc.,) which will become the dialog box and set its id. Now, use the jQuery UI dialog() method to create a dialog box.

Step 3 − Create a button which on clicking will display your dialog box. Write the function to open the dialog box on clicking within the <script> tag.

Step 4 − Style your button and dialog box using CSS. Use the class selector “.ui-dialogtitlebar-close” and set its display property to none.

Example

The following example demonstrates how to eliminate the close button from jQuery UI dialog box.

<!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>

Conclusion

Dialog boxes are small graphical windows which are helpful in user interaction. It enables the developers to communicate with the user and receive a response from them. There are many ways to create such dialog boxes. In this article, we have used jQuery UI to create a dialog box. Also, we have discussed the method to remove the close button (displayed by default) from jQuery UI dialog box.