Modal Module/Widget Particle

  • Tony
  • 7 April 2020
  • No comments
  • Docs
Create modal dialogs with different styles and transitions for any Joomla module.. See how Modal Module/Widget can be designed beautifully on Demo Page | WordPress Demo.

# Modal Module Joomla Package contents

Files Description
jlmodalmodule.yaml Contains the Modal Module particle settings.
jlmodalmodule.html.twig The Twig file to pull information, settings.

# Modal Widget WordPress Package contents

Files Description
jlmodalwidget.yaml Contains the Modal Widget particle settings.

jlmodalwidget.html.twig The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Modal module and modal widget require Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Modal Module particle (i.e: Home) -> Layout tab -> Drag and drop the Modal Module Particle from Particles panel (left corner) to the section you want to display the particle.


Settings Description
Module Id Pick a Joomla Module or Wodpress Widget
Guest Button Icon Choose the Button Icon for guest.
Guest Text Specify the button text for guest.
User Button Icon Choose the Button Icon for logged in user.
User Text Specify the button text for logged in user.
Style Set the button style.
Button Size Set the button size.
Modal Settings Common settings for Modal
Modal Title Instead using defaul Joomla module title, you can use this title as custom Modal title.
Style Title styles differ in font-size but may also come with a predefined color, size and font.
Decoration Decorate the title with a divider, bullet or a line that is vertically centered to the heading.
Predefined Color Select a predefined text color.
HTML Element Choose one of the elements to fit your semantic structure.
Close button To create a close button for modal.
Center Modal To vertically center the modal dialog.

Choose between default, container width or full modal.

Default: Default modal width

Container: Expand the modal dialog to the default Container width.

Full: To create a modal, that fills the entire page

Full Modal Image Add a modal background image to can create a nice, split fullscreen modal.
CSS Classes CSS class name for the particle.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings


Leave a Reply

You must be logged in to post a comment.

80+ templates updated for Joomla 5.1.1 and JoomLead particles 2.3.0 Download
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now