How to make a basic dialog using jQuery UI ? Last Updated : 18 Jan, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report 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"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> Example 1: HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <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"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <script> $(function () { $("#gfg").dialog({ autoOpen: true, }); $("#geeks").click(function () { $("#gfg").dialog("open"); }); }); </script> </head> <body> <div id="gfg" title="GeeksforGeeks"> jquery UI| basic dialog option </div> <button id="geeks">Open Dialog</button> </body> </html> Output: Example 2: HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <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"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script> <script> $(function () { $("#gfg").dialog({ autoOpen: false, }); $("#geeks").click(function () { $("#gfg").dialog("open"); }); }); </script> </head> <body> <div id="gfg" title="GeeksforGeeks"> Jquery UI| basic dialog option </div> <button id="geeks">Open Dialog</button> </body> </html> Output: Comment More infoAdvertise with us Next Article How to design login dialog using jQuery EasyUI Mobile ? T taran910 Follow Improve Article Tags : JQuery jQuery-UI Similar Reads How to make basic menu using jQuery UI ? 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. jQuery UI menu is a Themeable menu that is used with mouse and keyboard interactions for navigating between pages. In this article, w 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 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 jQuery UI dialog widget() Method The dialog widget() method in jQuery UI returns the dialog box's widget element. Syntax: var a = $( ".selector" ).dialog("widget");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 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 create a basic popup button 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 basic popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†1 min read Like