The screen shot shows a dialog (with the title "Test dialog") that is displayed when the user clicks the "World!" button in the main window (with the title "Hello World App"). The onclick handler for the "World!" button simply makes the following call to display the dialog:
The source for dialog.xul is simple:
<!DOCTYPE window SYSTEM "dialog.dtd">
<window name="main" title="&dialog.title;" main="false" width="250" height="100" x="500" y="100">
<button onclick="return Button1Click();" label="&button1.label;"/>
The above layout displays a 250x100 pixel dialog and centers the button in the middle of the dialog. I could have used any arbitrary layout or content, this is just one example.
To close the window, I associate an onclick handler with the "Click me to dismiss" button, and call document.close() from it. This code is in dialog.js (see the script tag in the above code for how dialog.js is associated with the dialog). Here is the onclick handler:
dump("Inside of dialog::Button1Click\n");
-- at the same time, recompiling the scripts associated with the newly focused document. This last step seemed unsavory at best, but it was necessary.