Creating Dialog Widget
Notes:
jquery ui - Creating Dialog Widget :
Dialog Widget:
creates a theme able and customizable overlay window (floating window) with a title bar and a content area.
Creating Dialog Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
<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>
3. Code the structure of the widget (i.e. HTML or markup):
To create a Dialog widget; we need to create a div element with 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
content of the div is placed in the content area of the window
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call dialog jQuery UI function on it
<script type="text/javascript">
$("#dialog").dialog();
</script>
Note: The dialog window can be moved, resized and closed.
Interview Questions:
