How to remove close button from jQuery UI dialog using CSS ? Last Updated : 30 Dec, 2021 Comments Improve Suggest changes Like Article Like Report 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 GeeksforGeeks</p> </div> </body> </html> Output: jQuery UI dialogHere, 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 GeeksforGeeks</p> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to remove close button from jQuery UI dialog using CSS ? P pulamolusaimohan Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to remove close button from jQuery UI dialog using jQuery ? In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. 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 2 min read How to make a basic dialog using jQuery UI ? In this article, we will be creating a Basic dialog using jQuery UI. Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js 1 min read How to create a Dialog Popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Dialog popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheet 1 min read jQuery UI Dialog buttons Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Dialog buttons option is used to specify the buttons that should be displayed on the dialog. Syntax: $( ".selector" ).d 1 min read jQuery UI dialog close() Method close() method is used to disable the dialog. This method does not accept any argument Syntax: $( ".selector" ).dialog("close"); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet" 1 min read How to create a Closing Popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a closing popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ hre 2 min read jQuery UI Buttonset disable() Method jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Buttonset widget is used to give a visual grouping for a group of related buttons. The jQuery UI Buttonset disable() me 1 min read How to design login dialog using jQuery EasyUI Mobile ? EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. In this article, we will learn to design login dialog and message dialo 3 min read How to destroy a button in jQuery UI ? To destroy a button in jQuery UI we will be using destroy() method which is discussed below: jQuery UI destroy() Method is used to remove the complete functionality of the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("destroy") Parameters: This 2 min read How to Disable a Button in jQuery UI ? To disable a button in jQuery UI, we will be using disable() method which is discussed below: jQuery UI disable() method is used to completely disable the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("disable") Parameters: This method does not 2 min read Like