How to remove the close button of jQuery UI dialog box in CSS
How to Remove the Close Button of a jQuery UI Dialog Box Using CSS
Displaying data in a categorized manner in an HTML page is a tedious task. Dialog boxes are used to present information in a visually appealing way on a web page. A dialog box is a floating window that contains a title and content. jQuery UI enables developers to create simple and user-friendly dialog boxes for websites. In this post, we’ll discuss how to create jQuery UI dialog boxes and how to remove the close button from these dialog boxes.
First, let’s take a look at jQuery UI dialog boxes.
jQuery UI Dialog
The jQuery Dialog() method enables developers to create a simple dialog window in the viewport, protected from page content. The dialog() method tells the browser that any HTML element can be displayed as a dialog. It consists of a title bar and space for content. By default, it can be moved, resized, and removed via a close button (x).
Grammar
$(selector, context).dialog (options);
Parameters
- Title – This allows the developer to determine the title that will appear in the dialog box.
-
Width – This allows the developer to determine the width of the dialog box.
-
Position – This allows the developer to determine the initial position of the dialog box.
-
Height – This allows the developer to determine the height of the dialog box.
-
Buttons – This is used to add buttons to the dialog box.
-
Max-height – Determines the maximum height of the dialog box
-
Max-width – Determines the maximum width of the dialog box.
-
Min-height – Determines the minimum height of the dialog box.
-
Min-width – Determines the minimum width of the dialog box.
-
Appendto – When set to false, it prevents the Idraggable class from being added to the HTML DOM element list.
-
Autoopen – When this option is set to “true,” the dialog box will open immediately after creation. If it is false, the dialog box will open when called.
Steps to Follow
The following are the steps to create a jQuery dialog box.
Step 1 – Add jQuery and jQuery UI from the CDN to your code within the <script> tags. Alternatively, you can 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 (e.g., div, p, etc.) that 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 that will display your dialog box when clicked. Write the function that opens the dialog box within the <script> tags. Set autoopen: false so that the dialog box opens when the button is clicked.
Step 4 — Use CSS to style your button and dialog box.
Example
The following example shows 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>
<span class="katex math inline">(function() {</span>("#demo").dialog({
autoOpen: false,
});
<span class="katex math inline">("#button").click(function() {</span>("#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 display a close button on the dialog by default. Next, if you want to remove the close button, we’ll use CSS.
Removing the Close Button from the jQuery UI Dialog
You can remove the close button from a jQuery UI dialog by simply setting the display property of the ui-dialog-titlebar-close element to none.
Syntax
.ui-dialog-titlebar-close {
display: none;
}
Steps to Follow
Here are the steps to follow
Step 1 – Add jQuery and jQuery UI from the CDN to the <script> tags in your code. Alternatively, you can 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 (div, p, etc.) that 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 that will display your dialog box when clicked. Write the function that opens the dialog box inside the <script> tag.
Step 4 – Use CSS to style your button and dialog box. Use the class selector “.ui-dialogtitlebar-close“ and set its display property to none.
Example
The following example demonstrates how to remove the close button from a jQuery UI dialog.
<!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>
<span class="katex math inline">(function() {</span>("#demo").dialog({
autoOpen: false,
});
<span class="katex math inline">("#button").click(function() {</span>("#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 that are very helpful in user interaction. They enable developers to communicate with users and get responses from them. There are many ways to create such dialog boxes. In this article, we used jQuery UI to create a dialog box. We also discussed how to remove the close button (which is displayed by default) from a jQuery UI dialog box.