Share on Google+Share on Google+

jQuery UI Widget : Dialog

This page discusses - jQuery UI Widget : Dialog

jQuery UI Widget : Dialog


jQuery UI Widget : Dialog

This widget is used to create a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the '+' icon by default.

f the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close').

To create a dialog box containing text of a element like div, we use :


For options, events ,method and theming click here



<!DOCTYPE html>
<link href="
/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="">
<script src="">
$(document).ready(function() {
<body style="font-size:62.5%;">

<div id="dialog" title="Dialog Title">This is a dialog box</div>


Output :

Download Source Code

Learn from experts! Attend jQuery Training classes.



Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Discuss: jQuery UI Widget : Dialog  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
September 25, 2012
chrome browser

it works perfectly on Firefox, but not on chrome.