Loading...
 
Skip to main content
Create a custom pop-up dialog box

Plugin Dialog

Introduced with Tiki8

Use this wiki plugin to create a custom pop-up dialog box using jQuery UI.

Parameters

Create a custom popup dialog box
Introduced in Tiki 8.
Go to the source code
Preferences required: wikiplugin_dialog, feature_jquery_ui

Parameters Accepted Values Description Default Since
(body of plugin) text
width digits In pixels. 300 8.0
id text Automatically generated if left empty in the form wpdialog_XX (must be unique per page) 8.0
hideAnim text 8.0
openAction rawhtml_unsafe JavaScript to execute when dialog opens. 8.0
showAnim text 8.0
title text 8.0
autoOpen (blank)
y
n
Open dialog automatically y 8.0
actions rawhtml_unsafe
separator: ,
JavaScript to perform on first button click. 8.0
buttons text
separator: ,
Button labels separated by commas. Ok 8.0
modal (blank)
y
n
Use modal form n 8.0
wiki pagename Wiki page to use as dialog body 8.0

Example

This code will cause a pop-up dialog box to appear when this page is loaded:

Plugin
Copy to clipboard
{DIALOG(title="World hello Dialog!" buttons="Foo,Bar" actions="alert(\"foo clicked\"),alert(\"you cancelled\")" showAnim="blind" hideAnim="explode" autoOpen="y" modal="y" wiki="plugin dialog test body" openAction="testDialog(this);")}Hello World{DIALOG}

Example with smarty template

The following code will cause a popup dialog window.

Put this in at the end of your template file:

sample.tpl
Copy to clipboard
{wikiplugin _name="DIALOG" autoOpen="n" id="wpdialog_bobshop_shipping" title="Shipping Costs" modal="y" wiki="bobshop_shipping"}{/wikiplugin}

Don't forget the underscore "_" before the parameter "_name".

Place this code in your template file at the place you want:

sample.tpl
Copy to clipboard
<p onClick='javascript:$( "#wpdialog_bobshop_shipping" ).dialog( "open" );'>Shipping</p>


In this example there must be a wikipage called "bobshop_shipping". Feel free to create it.

More info for params "hideAnim" and "showAdnim"

More option for the show and hide animations can be found here.

Aliases

Plugin Dialog | Dialog


Created by Jonny Bradley. Last Modification: Saturday 24 October, 2020 12:49:46 GMT-0000 by Bob.