Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery UI Dialog focus Event

  • Last Updated : 02 Dec, 2021

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.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$(".selector").dialog (
   focused: function( event, ui ) {

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link href = “”    rel =”stylesheet”>
<script src = “”></script>
<script src = “”></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’)}


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <link href=
    <script src=
    <script src=
    <script type="text/javascript">
      $(function () {
          autoOpen: false,
          focus: function (event, ui) {
        $("#gfg").click(function () {
    <div id="gfg2" title="GeeksforGeeks">
      <textarea>jQuery UI | focus(event, ui) Event</textarea>
    <button id="gfg">Open Dialog</button>



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!