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 -> Eventui : Type -> Object
callback function : function( event, ui ) { console.log(‘focused’)}
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8" />
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</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