ARI Smart Content: ARI JDialog plugin

Joomla dialog plugin, module, component, extension. Creates resizable, draggable, closable popup in Joomla content.

Dialog popup with specified content. This plugin is also a part of ARI Smart Content: Image Pack .

Features:
  • May contain any HTML content
  • Resizable if necessary
  • Modal if necessary

Example:


Theme:

Display simple resizable dialog


Display modal dialog


Usage:

{arijdialog width="350" height="200" title="Content" resizable="true" draggable="false"} {arijdicontent title="Modal dialog"} Click me2 {/arijdicontent} {arijdocontent} Content {/arijdocontent} {/arijdialog}

Theme:

Clicking on content specified in arijdicontent tag you will get dialog popup with content specified in arijdocontent.


Parameters:

  • wrapTag - Tag wraps content. Values: true, false
  • dialogClass – CSS class or classes to be applied to dialog. Values: CSS class or comma separated classes
  • autoOpen - When autoOpen is true the dialog will open automatically when page is loaded. Values: true, false
  • autoResize - When autoResize is true the dialog fits size of container to content. Values: true, false
  • draggable – Should dialog be draggable or not. Values: true, false
  • resizable – Should dialog be resizable or not. Values: true, false
  • height – Dialog popup height. Values: number
  • width – Dialog popup width. Values: number
  • maxHeight – When dialog is resizable its height can be resized up to this value. Values: number
  • maxWidth – When dialog is resizable its width can be resized up to this value. Values: number
  • minHeight – When dialog is resizable its height can be minimized up to this value. Values: number
  • minWidth – When dialog is resizable its width can be minimized up to this value. Values: number
  • modal – Should dialog be modal or not. When modal dialog is displayed other items on the page cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements. Custom style values for the overlay (e.g. changing its color or opacity) can be provided with the overlay option. Values: true, false
  • overlay - Key/value object of style properties for the overlay to display behind the dialog (but above other page elements). Example: opacity: 0.5, background: black
  • position – Position on the page where dialog should be displayed. Example: right,bottom – dialog will be displayed in the right bottom position. Values: center; left; right; top; bottom; right,top; left,top; right,bottom; left,bottom
  • stack - Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus. Values: true, false
  • title – Dialog title. Values: string