How to Create Dialog Widget in JQuery UI With Examples

Dialog Jquery UI Examples

In this article, we will see how to create a dialog widget in jquery UI with examples.

Dialog Widget

It creates a theme-able and customizable overlay window (floating window) with a title bar and a content area. And it is one type of widget in Jquery UI.

How to create a Dialog widget

1. Create a new HTML document with basic HTML syntax and link jquery UI files.

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

</head>
<body>
<script>

</script>
</body>
</html>

2. Code the structure of the widget (i.e HTML or markup):
To create a Dialog widget; we need to create a div element with a title attribute and message to be displayed

<div title="HTML" id="dialog">
HTML is a markup language
</div>

Where:
 Title  attribute of the div is used to form the title of the window, and the content of the div is used to form the content area of the window

3. Select the element using the JQuery selector, call the dialog jQuery UI function on it

<script type=" text/javascript">
$("#dialog").dialog();
</script>

The dialog window can be moved, resized, and closed.

Result:

dialog jquery ui examples

Leave a Reply