Dialog and TooltipDialog
Dijit's modal Dialog Box simulates a regular GUI dialog box. The contents can be arbitrary HTML, but are most often a form or a short paragraph. The user can close the dialog box without acting by clicking on the X button in the top-right corner.
Example
The following dialog box shows a simple Change Password form:

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dialog demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
function checkPw(dialogFields) {
if (dialogFields.confirmpw != dialogFields.newpw)
alert("Confirmation password is different. Password is unchanged.");
}
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" onclick="dijit.byId('dialog1').show()">Change Password</button>
<div dojoType="dijit.Dialog" id="dialog1" title="First Dialog" execute="checkPw(arguments[0]);">
<table>
<tr>
<td><label for="name">Old Password: </label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="oldpw"></td>
</tr>
<tr>
<td><label for="loc">New Password: </label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="newpw"></td>
</tr>
<tr>
<td><label for="desc">Confirm New Password: </label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit">OK</button></td>
</tr>
</table>
</div>
</body></html>
Everything in the dialog box is wrapped in an implicit form. The code in the execute() attribute is executed when the dialog is submitted normally.
Auto-focusing The First Text Box (For 1.0)
Dialog, like most forms, does not automatically set the focus on the first form field. To do this with Dijit Dialog or TooltopDialog, simply define this code snippet once:
var focusFirstInput = function(e) { dijit.focus(dojo.query('input', this.domNode)[0]); }
Then use dojo.connect to hook it to each dialog's onOpen event:
var c = dojo.connect(someDialogWidget, 'onOpen', dojo.hitch(someDialogWidget, focusFirstInput));
In 1.1 the Dialog has been updated to find and set focus to the first focusable element within the dialog. Thus, the above code snippet is no longer necessary in 1.1. See additional information in the 1.1 Accessibility section below.
TooltipDialog
A variant on Dialog Box is dijit.TooltipDialog. This displays the dialog box contents in a Tooltip
Although both Dialog and TooltipDialog are modal, TooltipDialog can be closed by clicking anywhere on the screen, whereas for Dialog you must click on the [x] mark of the Dialog.
A TooltipDialog appears as a drop down from a button, similar to a drop down button.
Example

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TooltipDialog demo</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
function checkPw(dialogFields) {
if (dialogFields.confirmpw != dialogFields.newpw)
alert("Confirmation password is different. Password is unchanged.");
}
</script>
</head>
<body class="tundra">
<div dojoType="dijit.form.DropDownButton">
<span>Change Password</span>
<div dojoType="dijit.TooltipDialog" id="dialog1" title="First Dialog" execute="checkPw(arguments[0]);">
<table>
<tr>
<td><label for="name">Old Password: </label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="oldpw"></td>
</tr>
<tr>
<td><label for="loc">New Password: </label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="newpw"></td>
</tr>
<tr>
<td><label for="desc">Confirm New Password: </label></td>
<td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit">OK</button></td>
</tr>
</table>
</div>
</div>
</body></html>
dijit.Dialog, dijit.TooltipDialog
Simulates GUI Dialog box. Dialog displays forms overlaying
the current page, TooltipDialog displays form in a tooltip.
|
||
Attributes
|
||
errorMessage | String Locale dep. |
Message that shows if an error occurs |
extractContent | Boolean false |
Extract visible content from inside of <body> .... </body> |
href | String | The href of the content that displays now. Set this at construction if you want to load data externally when the pane is shown. (Set preload=true to load it immediately.) Changing href after creation does not have any effect; see setHref(); |
isLoaded | Boolean false |
Tells loading status see onLoad|onUnload for event hooks |
loadingMessage | String Locale dep. |
Message that shows while downloading |
open | Boolean false |
Is dialog box initially open |
parseOnLoad | Boolean true |
parse content and create the widgets, if any |
preload | Boolean false |
Force load of data even if pane is hidden. |
preventCache | Boolean false |
Cache content retreived externally |
refreshOnShow | Boolean false |
Refresh (re-download) content when pane goes from hidden to shown |
title | String | (TooltipDialog only) Description of tooltip dialog (required for a11Y). For regular dialogs, you can set dijit.byId("dlg").titleNode.innerHTML to change the title. |
Methods
|
||
cancel() | Cancels a inflight download of content | |
hide() | Hide the dialog if we haven't been initialized yet then we aren't showing and we can just return | |
layout() | Sets the background to the size of the viewport (rather than the size of the document) since we need to cover the whole browser window, even if the document is only a few lines long. | |
orient(/*Object*/ corner) | (TooltipDialog only) configure widget to be displayed in given position relative to the button. See dijit.Tooltip for notes on positioning | |
refresh() | Force a refresh (re-download) of content, be sure to turn off cache we return result of _prepareLoad here to avoid code dup. in dojox.layout.ContentPane | |
resize(/* String */size) | Explicitly set this widget's size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets) | |
setContent(/*String|DomNode|Nodelist*/data) | Replaces old content with data content, include style classes from old content | |
setHref(/*String|Uri*/ href) | Reset the (external defined) content of this pane and replace with new url Note: It delays the download until widget is shown if preload is false | |
show() | Dialog only display the dialog first time we show the dialog, there's some initialization stuff to do | |
Extension Points
|
||
onContentError(/*Error*/ error) | called on DOM faults, require fault etc in content default is to display errormessage inside pane | |
onDownloadEnd() | called when download is finished | |
onDownloadError(/*Error*/ error) | Called when download error occurs, default is to display errormessage inside pane. Overide function to change that. The string returned by this function will be the html that tells the user a error happend | |
onDownloadStart() | called before download starts the string returned by this function will be the html that tells the user we are loading something override with your own function if you want to change text | |
onLoad(/* Event */e) | Event hook, is called after everything is loaded and widgetified | |
onOpen(/*Object*/ pos) | (TooltipDialog only) called when dialog is displayed. See dijit.Tooltip for pos details. | |
onUnload(/* Event */e) | Event hook, is called before old content is cleared |
Accessibility (added for 1.0)
General
When a dialog is opened focus goes to the title section of the dialog. This was implemented to provide screen reader support to speak the title of the dialog when it is opened. Likewise, when a tooltip dialog is opened, focus is placed on the container of the tooltip dialog. In future versions of the dialog and tooltip dialog widgets, focus will go to the first item in the dialog or tooltip dialog.
When focus is in a dialog, pressing the tab key will move focus forward to each focusable element within the dialog. When focus reaches the last focusable element in the dialog, pressing tab will cycle focus back to the dialog title. Pressing shift-tab will move focus backwards through focusable elements within the dialog until the dialog title is reached. If focus has previous cycled forward through all of the elements, pressing shift-tab with focus on the dialog title will move focus to the last element in the dialog. If focus has not previously been cycled through all of the focusable elements in the dialog using the tab key, pressing shift-tab with focus on the dialog title will leave focus in the title. The same focus cycling applies to the tooltip dialog as well with focus being set to the tooltip dialog container since there is no dialog title.
Known Issue: On Windows, In Firefox 2, when in High Contrast mode, the dialog with display correctly, but the underlying page will not be seen.
Keyboard
Action | Key |
---|---|
Navigate to next focusable element in the dialog/tooltip dialog | tab |
Navigate to previous focusable element in the dialog/tooltip dialog | shift-tab (see general section above for additional details) |
Close the dialog/tooltip dialog | escape |
Accessibility (Updated for 1.1)
General
When a dialog is opened focus goes to the first focusable element within the dialog. The first focusable element may be an element which appears in the tab order by default such as a form field or link, an element with a tabindex attribute value of 0 or an element with a tabindex value greater than 0. Elements with a tabindex value greater than 0 will appear in the tab order before elements with a tabindex of 0 or those in the tab order by default. If the dialog does not contain a focusable item, focus will be set to the dialog container element when the dialog is opened. The same focus behavior has been implemented for tooltip dialog
When focus is in a dialog, pressing the tab key will move focus forward to each focusable element within the dialog. When focus reaches the last focusable element in the dialog, pressing tab will cycle focus back to the first focusable item. Pressing shift-tab will move focus backwards through focusable elements within the dialog. When the first focusable item is reached, pressing shift-tab will move focus to the last focusable item in the dialog.
Known Issues:
- On Windows, In Firefox 2, when in High Contrast mode, the dialog with display correctly, but the underlying page will not be seen.
- Special behavior for Input type=file elements as the first focusable element in Firefox. Programmatically setting focus to an input type=file element behaves oddly in Firefox. In this case the focus is set onto the textbox field and then immediately moved onto the browse button of the input type=file field. This causes problems in Firefox when setting focus to an input type=file element as the first element as a dialog or tooltip dialog. For this reason, in Firefox if the first focusable item in a dialog or tooltip dialog is an input type=file, focus will be set onto the dialog container rather than the input element. For these reasons it is recommended that input type=file elements not be added as the only or first focusable item within a dialog or tooltip dialog in Firefox.
- Even though the dialog is marked with the proper ARIA role of dialog, JAWS 9 does not speak "dialog" when the dialog is opened. In Firefox 2 even though the focus is on the first focusable item in the dialog, the information about that item is also not spoken. Thus, it is important that the instructions or label for a trigger element that opens a dialog to indicate via text that a dialog will be opened. In Firefox 3 the dialog is also not announced but the information about the item in the dialog which gets focus is spoken. This will hopefully be corrected in a future release of JAWS.
Keyboard
Action | Key |
---|---|
Navigate to next focusable element in the dialog/tooltip dialog | tab |
Navigate to previous focusable element in the dialog/tooltip dialog | shift-tab |
Close the dialog/tooltip dialog | escape |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
Cannot size or position dialog
I was trying to off-centre and enlarge a dijit.Dialog because my content is narrow enough to fit on a 1024x768 res screen, and I want the Dialog to appear in the centre of my content, not in the centre of the screen (if you are using a larger resolution screen). I managed to resize the dialog box by adding
.dijitDialog {
position: absolute;
width: 300px;
height: 300px;
background: #eee;
border: 1px solid #999;
-webkit-box-shadow: 0px 3px 7px #adadad;
}
to my css... but couldn't position it where I wanted. I realised from the porting guide that resizing and repositioning were not supported with dijit.Dialog, which is a shame:
http://dojotoolkit.org/book/dojo-porting-guide-0-4-x-0-9/widgets/floatin...
Contradictory statements on this page
There are two contradictory statements on this page.
In the section "Auto-focusing The First Text Box",
it is mentioned that using dojo.connect, we can connect the onOpen Extension for both Dialog and TooltipDialog.
But in the Extension Points list which is given at the end of the page, it is mentioned that onOpen extension point is available only for TooltipDialog.
I have tried using the Auto-focus code with a Dialog and it does not seem to work. Please clarify, which statement is correct and in case onOpen is available only for TooltipDialog, please also provide an example of how to do the same for a Dialog.
correct
I looked in the code and there is no onOpen for regular dialog, here is the workaround I am using:
Whatever opens the dialog, I put a function call after it..
And somewhere else(in what I use as common.js) I put this function (it's different from what's above).
The Dialog has a focus called at 50, 75 makes sure it's safe but quick enough the user won't notice. Works for me, if it doesn't for you, extend it a bit(And let me know, as I'll do the same in my code). I think they have to release a new version with an onOpen to make the other one work.
Would be better to have the focus in a central location, and some simple js hacking would make it work I believe with an onOpen, but I don't want to release incompatibilities into my code.
onHide would also be great, and onOpen is needed to clear the form each time it is opened.
Hope this helps!
--Joseph
Just a slight tweak to your
Just a slight tweak to your code to make it work (at least for me), was changing the "what" to "what.domNode" in the dojo.query command:
Contradictory statements on this page and more..
edeskonline is absolutely right.
the Dialog is not working with the example, and I wasn't able to connect any external js to it.
I wana have a bind when I do hide after the dialog is shown. any ideas how to do this?
Please give us examples how to focus the input and how to exec external methods onOpen onHide?
Cannot view page with IE 7
I tried navigating to this page in IE7 and I get an error "this._fadeIn" is null or not an object. Does anyone else have this problem?
I see the same thing.
I see the same thing.
See Ticket #5282.
compatibility with IE6
When i try the dialog box under IE6, it's not working. I have a blank square on the left hand side of the window.
tested on IE6.
We tested on IE6 and it worked for us, but feel free to submit a testcase to the bug database.
orient documentation?
Where is the documentation for the orient method? As far as I can tell, it is not documented on the dijit.Tooltip pag -- in fact, Tooltip does not appear to support this method.
Also, I'm curious why this can't be set via an Attribute instead?
Dialog contents appear/disappear as page loads
I often see the dialog contents appear briefly then disappear as the page loads. I'm not sure if there is a simple fix for this, but what I've done is to move the contents of the dialog to a separate file and load it using href='myDialog.php'.
I'm really new to Dojo, and I'm also new to Javascript (yup, I don't have much experience in this area). I'm wondering if anyone else sees this problem and if what I've done is an appropriate way to get around it.
Thanks for your help.
hide it
how about putting style="display: none" or style="visibility: hidden" on the source node for the dialog?
href is good
I've been able to make this work pretty well with href, and I like that the dialog contents are actually downloaded on-demand - I think most of the time the page will be viewed but the dialog won't be used. So I think href is the right solution for my case. The only problem I've been having is that I'm not sure how to pass information into the dialog when it's loaded using href. I may end up having to set a couple of cookies. Is that the standard approach?
This page can't be opened in IE 7
I got error (pop-up window) like Internet Explorer cannot open the Internet site http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/dialog. Operation aborted
But it works fine in FF 2.0
My OS is Windows XP Pro and IE 7.0.5730.13
What's wrong? Thanks for your help
Troy
I believe it is because that
I believe it is because that is one of several Book pages that makes a call:
without having it made in dojo.addOnLoad(fcn ref);
Can anyone get it fixed?
If it is true, can anyone get this page fixed on server side? Thanks for your help.
change applied
hopefully everything looks good now
Nope, still doesn't work
I got the same error when I access http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/dialog in IE7.0
Thanks.
sorry, try it again
sorry, try it again
Thanks. Works for me now.
Thanks. Works for me now.
Only lingering item on that page is if you do a refresh (not likely), the aol cdn ver 1.0 dojo used by that page (are other pages updated to 1.0.2??) doesn't have the dialog fix in Ticket 5282, so you get, in IE, a fade_in/out not an object error.
Also, (I know...) when you click on the forward navigation at the end of the article and above the comments, the page it sends you to (titlepane) also has the parser problem in IE:
http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/layout/title-pane
1.0 points at 1.0.2
I'm trying to change over the pages to use 1.0 in the CDN url, which points at the latest 1.0 release (1.0.2 as of this writing) So yes, any bugs in 1.0 won't get fixed until/unless we upgrade the book to use 1.1 in the examples.
I'll go fix the title pane page now. Thanks.
Not in FireFox 2
Get a blank page when I click on this TitlePane link with FireFox 2..?
Yes, works like a charm in IE7 now
Thanks very much for your time and work.
I just re-opened a Ticket on this...
I just re-opened a "book" (documentation in the Book) Ticket here:
http://trac.dojotoolkit.org/ticket/5482
Making dialog fixed
Can we remove the functionality of the Dialog to move around. I want the dialog to remain at exact position where it appeared first time.
Get "node.tagName has no properties" in console
I pasted the first sample into my app where I have Dojo 1.0.2 installed locally, and changed the references, but I changed the nonexistent "dojo.xd.js" to "dojo.js". the app appears to behave correctly, but I noticed the following in the console:
node.tagName has no properties
http://localhost:8080/csstest/dojo/dojo/dojo.js
Line 158
When I instead change it to "dojo.js.uncompressed.js" (probably what "dojo.xd.js" changed to in 1.0.2), I don't see that message.
When I looked in the uncompressed version, I saw the following is the only place that references "node.tagName":
Past that, I don't know how else to diagnose this.
onOpen doesn't work, but onClick works.
onOpen doesn't work.
But I found onClick works.
This is my code:
And I also found 'onClick' doesn't work. It must be lowercase 'onclick'. I think this is a kind of bug.
The problems you saw may be
The problems you saw may be related to using dojo vs. dijit in dojo.byId('btnLogin'), if btnLogin is a widget. A widget is found with dijit.byId('...'), while a normal HTML element is found by dojo.byId('...'). A widget usually expects onClick vs. the HTML element expecting an onclick.
If btnLogin is really a dijit.Dialog, then using dijit.byId('btnLogin') and then connecting to its onOpen might work.