<forms:dialogbox> </...>

Shows a popup free dialog box by creating a div which overlays the screen.

Content

any

The content of the dialog box.

Attributes

autoShow

bool|string

Possible values:
Set to "true" to always automatically open this dialog
Set to "once" to show once per session
Set to "register" to show the dialog to new visitors
Set to "exitintent" to show the dialog when the user moves the mouse up to exit the page

autoShowDelay

int

Number of seconds before dialog box is shown

backdrop

bool

Backdrop

When set to true, this dialogbox will rest on top of a dark backdrop.
When set to false, no backdrop will be rendered.

closable

bool

Set to false if the dialog box cannot be closed

height

string

Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.

string

(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).

width

string

Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.

Examples

Popup Subscription Form

Dialog opens on load, subscribe form inside.

HTML:

Subscription form with Dialog Box <forms:dialogbox autoshow="register" width="500"> <forms:form id="popup_subscribe" onsubmitajax="ajaxevent2"> <forms:row label="First and Last Names"> <forms:editbox id="contact_first_name" width="80" validations="mandatory" /> <forms:editbox id="contact_last_name" width="110" validations="mandatory" /> </forms:row> <forms:row label="E-mail"> <forms:editbox id="contact_email" width="110" validations="mandatory" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton>Submit</forms:submitbutton> </forms:row> </forms:form> </forms:dialogbox>

Open on Exit Intent

Shows dialog When the user is mousing above window to click back. Only shows once, when not logged in.

HTML:

Subscription form with Dialog Box <forms:dialogbox autoshow="exitintent" width="500"> <forms:form id="popup_subscribe"> <forms:row label="First and Last Names"> <forms:editbox id="contact_first_name" width="80" validations="mandatory" /> <forms:editbox id="contact_last_name" width="110" validations="mandatory" /> </forms:row> <forms:row label="E-mail"> <forms:editbox id="contact_email" width="110" validations="mandatory" /> </forms:row> <forms:row type="one_column" align="center"> <forms:submitbutton>Submit</forms:submitbutton> </forms:row> </forms:form> </forms:dialogbox>

Open Dialog Box with Link

Demonstrates a Dialog Box opened by a link

HTML:

Simple dialog box opening with a link: <standard:link opendialogid="simple">Open Dialog Box</standard:link> <forms:dialogbox id="simple" width="500"> <h2>Simple Dialog Box</h2> </forms:dialogbox>

Run Example

Open Dialog Box with JavaScript

Demonstrates a Dialog Box opened by a link

HTML:

Simple dialog box opening with a JavaScript: <forms:dialogbox id="mydialog" width="500"> <h2>I am opened with JavaScript</h2> <p><a href="#" onclick="DialogBox.close('mydialog'); return false;">Close me</a></p> </forms:dialogbox> <script> setTimeout(function() { DialogBox.open('mydialog'); }, 5000); </script>

Run Example