How to initialize a dialog without a title bar ?

Last Updated : 31 Oct, 2021

The task is to initialize a dialog without a title bar. In this article, we will see how to initialize the dialog box without any title bar.

A Dialog box is used to provide information in a particular way on the HTML pages. It creates a small window that is protected from the page content. If you want to change its size, color, or any other stuff then just have to edit a few codes and if you want to close that dialog box then you just have to click on the ‘X’ button that is present on the right side of the dialog box.

A dialog box is used to provide more information regarding the topic. It looks systematic when we use this kind of widget in your web application.

Approach:

Create an HTML page and import the jQuery library.
The next step is to use the dialog and click() method to create a dialog box whenever we click the button.
In the last step, you just have to use a hide() method to hide the title bar of the dialog widget.

Example:

HTML

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8">  
  <link rel="stylesheet" href= 
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
  <script src= 
"//code.jquery.com/jquery-1.12.4.js"> 
  </script> 
  <script src= 
"//code.jquery.com/ui/1.12.1/jquery-ui.js"> 
  </script> 
  <style> 
     button  
     { 
       background-color: #4CAF50; /* Green */ 
       border: none; 
       color: white; 
       padding: 15px 32px; 
       text-align: center; 
       text-decoration: none; 
       display: inline-block; 
       font-size: 16px; 
    } 
    body{ 
        text-align:center;     
    } 
   </style> 
</head> 
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
   
    <button id="opener">open the dialog</button> 
    <div id="dialog" title="Dialog Title"> 
       I'm a dialog 
    </div> 
   
     <script> 
          $( "#dialog" ).dialog({ autoOpen: false }); 
          $( "#opener" ).click(function() { 
             $( "#dialog" ).dialog( "open" ); 
             $(".ui-dialog-titlebar").hide(); 
          }); 
    </script>  
</body> 
</html>