jquery dialog widget

Suggested Videos
Part 86 - jQuery dynamic menu from database in asp.net
Part 87 - jquery selectmenu widget
Part 88 - jQuery selectmenu from database



In this video we will discuss jQuery dialog widget with examples.



2 simple steps to get the jQuery dialog widget on a web page


1. Place the content inside a div element

<div id="dialog">This is jQuery dialog widget example</div>

2. Find the div element and call jQuery UI dialog() function
$('#dialog').dialog();

There are many jQuery dialog options to customize the dialog widget. Here are some of the most commonly used options.

Option	Description
title	Sets the title of the dialog. You can also use the title attribute of the div element to set the title for the dialog. If both are specified title option value overrides the value set using th element title attribute
draggable	Boolean option that determines if the dialog can be draggable by the title bar
resizable	Boolean option that determines if the dialog is resizable
closeOnEscape	Boolean option that determines if the dialog can be closed by pressing the Esc key
modal	Boolean option that determines if the dialog is modal dialog. With modal dialog other items on the page will be disabled and cannot be interaced with until the dialog is closed
autoOpen	Boolean option that determines if the dialog should open automatically upon initialization. If set to false, the dialog will stay hidden until the open() method is called