From Xojo Documentation

You are currently browsing the old Xojo documentation site. Please visit the new Xojo documentation site!

Class (inherits from WebView)

A WebDialog is a small dialog window that displays as a sheet, palette or modal dialog within a web page.

Closed Opening Shown
ContextualMenuSelected Overflowed
Dismissed Resized
ContextualMenu LockBottom fa-lock-32.png Parent fa-lock-32.png
ControlID fa-lock-32.png LockHorizontal fa-lock-32.png Resizable
Enabled LockLeft fa-lock-32.png Style
Height LockRight fa-lock-32.png TabIndex
Indicator LockVertical fa-lock-32.png Title
LastControlIndex MinHeight Tooltip
LayoutDirection MinWidth Top
LayoutType Name fa-lock-32.png Visible
Left Page fa-lock-32.png Width
AddControl ExecuteJavaScript Show
Close GotoURL UpdateBrowser
ControlAt Hide
Controls SetFocus


WebDialogs can only contain controls that are subclasses of WebControl.

To display a dialog on your page, drag it to the Web Page Layout Editor or instantiate one in code. You can then display it by calling the Show method:


In the dialog itself, you should have a way to close it, usually with a button with code like this:


When the dialog is closed, the Dismissed event handler (for the dialog on the web page) is called. There you can perform your actions.

Keep in mind that dialogs are not modal and do not stop your code from running. After calling MyDialog.Show, the next line of code will run. Use the Dismissed event handler to process the results from the dialog.

Dialogs can remain in view, even as a page is hidden from view. However, once a page is closed (rather than hidden) any dialogs attached to it are also removed.

For simple dialogs, you can instead use the MessageBox method.

Differences Between Dialogs in Web and Desktop Applications

There are two important differences between dialogs in web applications versus desktop applications. The first is that web dialogs are a specific type project item whereas in a desktop application project they are a window with the Frame property set to a particular value. The other more important difference is that unlike in a desktop project, dialogs in a web application are asynchronous.

After creating a WebDialog by clicking Add Dialog in the Project Editor’s command bar, you must add the dialog to any web page in front of which, you wish to show the dialog. All dialogs you add to your project will show up in the Controls pane of the WebPage Editor as they are treated, for the most part, like any other control on a webpage. To add the dialog to your page, drag it from the Controls pane to the WebPage. It will appear in the list of controller objects list at the bottom of the editor. You can then double-click the dialog to add code to its events.

Dynamically Displaying a Dialog

At times, you may need to display a different dialog at run-time. For example, you may want to use a different dialog to display when the user is on a mobile device.

This example dynamically displays a dialog, MyDialog, which has a single button with this code in its Action event handler:


On a button on the web page, you can display the dialog like this:

Var d As New MyDialog
AddHandler d.Dismissed, AddressOf DismissedHandler

DismissedHandler is a method on the web page declared like this:

Sub DismissedHandler(d As WebDialog)
MessageBox("Dialog closed!")
End Sub
Dynamically created Dialogs that are closed by calling Close cannot be shown again until you create a new instance.


Consider a dialog, MyDialog, which has a single button with this code in its Action event handler:


With this dialog dragged onto a web page, you can display it using this code (probably on the Action event handler of a button):


When the dialog is closed, the Dismissed event handler is called. This code displays a simple message to indicate it was closed:

MessageBox("Dialog is closed.")

Additional examples are in the WebDialog.Dismissed page.

See Also

MessageBox, WebPage, WebHTMLViewer, Window classes.