Modals for Joomla 4

Peter van Westen ADMIN

I have just released the first beta version of Modals for Joomla 4.

A lot has changed compared to the Joomla 3 version.
Mainly the look and feel (styling) has changed. But also a lot of options have changed (or been removed).
So updating from the Joomla 3 version will give you a different result (in styling and maybe in functionality).

Here is a list of most of the major changes:

Different styling
Modals for Joomla 4 comes with completely new styling. It also comes packed with a couple of themes (which might get extended in the future). There is also a 'Classic' theme which comes close to the old styling of the Joomla 3 version.

The whole HTML output and structure has been completely changed.
This also means that any custom CSS you might use for the Joomla 3 version will not work for the Joomla 4 version.

A lot of settings that changed the styling of the modal have been removed. Any changes to styling that you need, can be done through CSS.

Size & Position
The sizing of the modals has become a lot simpler. No more settings for inner and outer widths/heights. And no more initial dimensions.
You can still give the modal a fixed width and height. Or just let if auto-size.

You now also get the ability to have the modal open in different locations of the screen:
top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, and center (default)

So no more messing with pixels to position a modal.

No more jQuery
All javascript has been rewritten from the ground up, with no reliance on jQuery or other libraries.

Also the javascript API has changed.

To close a modal via custom javascript calls, you can now use:

RegularLabs.Modals.close();

You can add actions inside the

{modal}

tag to trigger stuff on certain events:

on-open="..."
on-opened="..."
on-load="..."
on-loaded="..."
on-close="..."
on-closed="..."

For instance, you can do:

{modal url="..." on-loaded="alert('Look, a cool modal');"}Click me{/modal}

Other stuff[
A lot of other things have changed too. And also new features/possibilities are added.
You will be able to find out about those when the documentation is fully done.

Try it out!
To get the final version released as fast as possible, it would help if you test the beta version.
And of course, let me know about any issues you run into.

You can download the latest beta (dev) version from:
regularlabs.com/development-releases

Keep an eye out for any updated versions there.

Please post a rating at the Joomla! Extensions Directory

Dirk67

1 year 11 months ago

Dirk67

1 year 11 months ago

thanks for your great work,
I will give it a test

Dan Atrill

1 year 11 months ago

Dan Atrill

1 year 11 months ago

Hi Peter

This is great news about the beta version of Modals. I installed the latest development release this morning and really like the easy interface in the editor and also the easier option changes in the plugin.

One thing I got when clicking through the different options was a message that appeared when I clicked Image and tried to select an image. There was a red message in the box that appeared saying:

"Error
Property 'mime_type' of argument 'item' of event onFetchMediaItems has a wrong item. Valid: string"

The issue appeared whether I was using the default editor or JCE.

I also noticed that the pop-up content which contains a form on our site has overflow: hidden with the default [data-modals-element=modal][data-modals-theme=dark] [data-modals-element=slide-content]

Is there a way I can globally change overflow setting?

I'm using Joomla 4.2.6 on PHP 7.4 with Cassiopeia as the template (I switched from an older version of YooTheme)

Many thanks,

Dan

Peter van Westen ADMIN

1 year 11 months ago

Peter van Westen ADMIN

1 year 11 months ago

Regarding the mime_type, I cannot reproduce that.
Can you check if you get the same error when trying to select an image in the editor (the Media editor button)?
Or when trying to select an image for the article Intro Image...

Regarding the overflow issue, please try the latest development version from:
regularlabs.com/development-releases

Please post a rating at the Joomla! Extensions Directory

Dan Atrill

1 year 11 months ago

Dan Atrill

1 year 11 months ago

Hi Peter

The update fixed the scroll bars / overflow, thank you!

Regarding image selection, it works OK in both the scenarios you described but it consistently fails when selecting an image from the Modal interface within an article.

I checked the same site in its Joomla 3.10.11 incarnation and selecting an image worked fine then.

I did try adding svg as a media type but that made no difference.

Thanks
Dan

Peter van Westen ADMIN

1 year 11 months ago

Peter van Westen ADMIN

1 year 11 months ago

Can you give me (super) admin and (s)ftp access so I can take a look?
And tell me on what url I can see/reproduce the issue.
You can use the 'Confidential information' button in the forum editor to hide sensitive information.

Please post a rating at the Joomla! Extensions Directory

Dan Atrill

Modals

M Modals