Modal Box Application

Last modified by Victor Rachieru on 2021/03/17 21:49

cogIntegration of wildbit's modal box in XWiki
TypeXAR
Category
Developed by

Jerome

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

This version of the extension is now outdated.
In newer versions of XWiki this is a default feaure. See the "View source" button for the latest developments of this code.

The Modal Box Application is a UI component that integrates http://www.wildbit.com/labs/modalbox/ in XWiki for developers to reuse in their applications.

Documentation

Developer's documentation
Modalbox cummunity

How to use

Download and install the application XAR in your wiki. Then, on any page where you wish to use modal box, include the proper scripts using the following statements:

#set($ok = $xwiki.jsfx.use("js/scriptaculous/scriptaculous.js")) ## only starting with XWiki 1.8 - present by default before
#set($ok = $xwiki.jsx.use("XWiki.ModalBox"))
#set($ok = $xwiki.ssx.use("XWiki.ModalBox"))

You can then use all APIs provided by the modal box component. The full documentation is available at http://code.google.com/p/modalbox/wiki/MethodsReference

For example:

1.1 Click the link below for a demo of the Modal Box

<a href="$xwiki.getURL('Sandbox.TableTraining','view','xpage=plain')" title="Simple form" onclick="
Modalbox.show(this.href, {width:1000, title: 'my title'}); return false; ">Test modal box</a>

Result

Here is a screenshot the modal box default style. Of course, it can be modified using CSS styles.

modalbox.png

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki
Tags: UI Component
    

Get Connected