forms:dialogbox
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox
ATTRIBUTES
EXAMPLES
forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<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.
id
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