How to initialize a dialog without a title bar ?

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>

Output:

How to initialize a dialog without a title bar ?

K

krishna_97

Improve

Article Tags :

Similar Reads

How To Change The Title Bar In Tkinter?

Changing the title bar in Tkinter is a fundamental aspect of customizing your application's window. The title bar typically displays the name of the window and can be modified to reflect the content or functionality of your application. Here, we'll explore three different approaches to change the ti

How to create a dialog box or window in HTML ?

In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5. Syntax: <dialog open> Contents... </dialog> Example 1: html <!DOCTYPE html> <html>

Onsen UI Dialog CSS Component Alert Dialog without Title

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Alert Dialog is used to display some warning messages with pop-ups on the webpage. Onsen UI Dialog CSS Component Alert Di

How to close a dialog box in windows?

The dialog box is a graphical control element in the form of a small window that communicates information to the user and prompts them for a response. There are two types of dialog boxes: Modal: These dialog boxes block the interaction with the software that initiated the dialog. These are used when

How to display a dialog box in the page ?

In this article, we are going to see how we can implement a dialog box on our webpage for certain actions. This can be implemented by using Several Methods.Possible Approaches:Using jQueryUI.Using Cascading Style Sheets.Explaining Each Approach:Approach 1 - Using jQueryUI: jQueryUI which is a collec