jQuery UI Dialog focus Event Last Updated : 02 Dec, 2021 Comments Improve Suggest changes Like Article Like Report The Dialog box is the way to inform the user about something. It is a nice way to popup on the user window to show the information that will happen in the next or any kind of information the developer wants to clarify to the user should know. jQueryUI dialog method is used to create a basic dialog window inside the page. It has a title bar and a content area and can be moved, resized, and closed with the ‘X’ icon by default. The focus event is triggered when the dialog box gains focus. Syntax: $(".selector").dialog ( focused: function( event, ui ) { console.log('focused') }, CDN Link: First, add jQuery Mobile 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: ‘Open Dialog’ button will trigger the click function (#gfg) that will further open the 'textarea' in a dialog (#gfg2). focus( event, ui ) : Triggers box gains focus. There is callback function attached to this focus. event : Type -> Event ui : Type -> Object callback function : function( event, ui ) { console.log(‘focused’)} 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 type="text/javascript"> $(function () { $("#gfg2").dialog({ autoOpen: false, focus: function (event, ui) { console.log("focused"); }, }); $("#gfg").click(function () { $("#gfg2").dialog("open"); }); }); </script> </head> <body> <div id="gfg2" title="GeeksforGeeks"> <textarea>jQuery UI | focus(event, ui) Event</textarea> </div> <button id="gfg">Open Dialog</button> </body> </html> Output: Reference:https://api.jqueryui.com/1.9/dialog/#event-focus Comment More infoAdvertise with us Next Article jQuery UI Dialog focus Event T taran910 Follow Improve Article Tags : Web Technologies HTML JQuery jQuery-UI Similar Reads jQuery UI Dialog open Event jQuery UI open event is triggered when the dialog box is opened. Syntax: Learn more about jQuery selectors and events here. $(".selector").dialog ( open: function( event, ui ) { console.log('opened') },Approach: First, add jQuery Mobile scripts needed for your project.<link href = "https://code.j 1 min read jQuery UI Dialog Drag Event jQuery UI Drag event is triggered when the dialog box is dragged. Learn more about jQuery selectors and events here. Syntax: $(".selector").dialog ( drag: function( event, ui ) { console.log('dragged') },Approach: First, add jQuery Mobile scripts needed for your project.<link href = "https://code 1 min read jQuery UI Dialog close Event jQuery UI Close event is triggered when the dialog box is closed. Learn more about jQuery selectors and events here. Syntax: $(".selector").dialog ( close: function( event, ui ) { console.log('closed') },Approach: First, add jQuery Mobile scripts needed for your project.<link href = "https://code 1 min read jQuery UI Menu focus Event jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu focus event triggers when 2 min read jQuery UI Dialog create Event jQuery UI Create event is triggered when the dialog box is created. Learn more about jQuery selectors and events here. Syntax: $(".selector").dialog ( create: function( event, ui ) { console.log('created') },Approach: First, add jQuery Mobile scripts needed for your project.<link href = "https:// 2 min read Like