Loading...
 
Skip to main content
Create a custom pop-up dialog box
2
Page actions
Print Get a short URL Open in WebDAV

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. Required parameters are in bold.
Go to the source code
Preferences required: wikiplugin_dialog

Parameters Accepted Values Description Default Since
(body of plugin) Array
buttons text Use comma-separated values for multiple buttons 8.0
size sm
md
lg
xl
fullscreen		 Size of the modal dialog. Default is medium md 28.0
wiki pagename Wiki page to use as dialog body 8.0
buttonsActions text JavaScript to perform on button click. Use comma-separated values for multiple buttons 28.0
buttonsClassNames text Css class names to apply to the buttons. Use comma-separated values for multiple buttons. 28.0
title text 8.0
actions text JavaScript to perform on button click. Use comma-separated values for multiple buttons 8.0
id text Allowing to control the modal via JS. Automatically generated if left empty in the form (it has to be unique) 8.0
openAction rawhtml_unsafe JavaScript callback function to execute when dialog opens. 8.0
staticBackdrop y
n		 If true, the modal will not close when clicking outside of the modal n 28.0
autoOpen (blank)
y
n		 Open the modal automatically n 8.0
showAnim y
n		 Allow the modal to open with a fade in effect y 8.0
showCloseIcon y
n		 Show a close icon in the header of the modal y 28.0
useWikiContent y
n		 Use wiki page content as the dialog body n 28.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}

  </div>
  <div class="modal-footer">
              <button type="button" class="" data-bs-dismiss="modal" onclick="alert(\"foo clicked\")">Foo</button>
              <button type="button" class="" data-bs-dismiss="modal" onclick="alert(\"you cancelled\")">Bar</button>
          </div>
</div>
<script type="module">import { initializeDialog } from "@jquery-tiki/plugins/dialog";initializeDialog("dialog-67f084d64c0b0", Boolean("y" === "y"), testDialog(this););</script>

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

History Source
Slideshow