Regular Labs home page

Modals

Search
Other Modals questions
Forum

Modals for Joomla 4

Peter van Westen's Avatar Peter van Westen ADMIN
1 year 4 months ago
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's Avatar Dirk67
1 year 4 months ago
thanks for your great work,
I will give it a test
Dan Atrill's Avatar Dan Atrill
1 year 4 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's Avatar Peter van Westen ADMIN
1 year 4 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's Avatar Dan Atrill
1 year 4 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's Avatar Peter van Westen ADMIN
1 year 4 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's Avatar Dan Atrill
1 year 4 months ago
OK...

Confidential information:
(hidden)


Many thanks
Dan Atrill's Avatar Dan Atrill
1 year 4 months ago
FTP...
Confidential information:
(hidden)
Peter van Westen's Avatar Peter van Westen ADMIN
1 year 4 months ago
I logged in, went to create a new article, clicked on the Media editor button...
And got that same error:
Property 'mime_type' of argument 'item' of event onFetchMediaItems has a wrong item. Valid: string
So this is an issue on your setup. Has nothing to do with Modals.
Please post a rating at the Joomla! Extensions Directory
Dan Atrill's Avatar Dan Atrill
1 year 4 months ago
Weird. OK, well thanks for letting me know.

Have a great Christmas.

Dan
Joel Fischer's Avatar Joel Fischer
1 year 4 months ago
Hi Peter,

Just tested the latest release - Modals-v12.0.0-dev2521608-PRO and noticed an issue with modals with the 'group' attribute for articles as iframes. It seems the articles are loading behind the modal window. This becomes noticeable when clicking on the slider arrows. It loads the article fine when the modals are not grouped.
Peter van Westen's Avatar Peter van Westen ADMIN
1 year 4 months ago
Can you give an example of the code ({modal} tags) you are using?
Please post a rating at the Joomla! Extensions Directory
Joel Fischer's Avatar Joel Fischer
1 year 4 months ago
Sure,
{modal article="198" group="options" iframe="true"}Colors{/modal}
<br>
{modal article="204" group="options" iframe="true"}Textures{/modal}
etc...
Peter van Westen's Avatar Peter van Westen ADMIN
1 year 4 months ago
The iframe="true" has no function and effect on the Joomla 4 version of Modals.
So adding that will do nothing differently.

I cannot reproduce your issue.
Do you have this online so I can take a look?
Please post a rating at the Joomla! Extensions Directory
Joel Fischer's Avatar Joel Fischer
1 year 4 months ago
This code works fine in J3.
The iframe tag was copied from the J3 site.
I will remove it in J4.

Here is a link for you to see what is happening.

Confidential information:
(hidden)
Peter van Westen's Avatar Peter van Westen ADMIN
1 year 4 months ago
Please try the latest development version from:
regularlabs.com/development-releases
Please post a rating at the Joomla! Extensions Directory
Joel Fischer's Avatar Joel Fischer
1 year 4 months ago
That Fixed the issue.

Thank You
John Bongiovanni's Avatar John Bongiovanni
1 year 3 months ago
Peter, just to let you know that I finished testing my 10 components that use RL Modals, and they're all working great. Thanks for you work and support.
I also reworked some of my JS to eliminate jQuery, so I appreciate the pain of that transition.
The only thing I need to do is tweak the presentation a bit with CSS.
Peter van Westen's Avatar Peter van Westen ADMIN
1 year 3 months ago
Ok, thanks for letting me know 🙂
Please post a rating at the Joomla! Extensions Directory
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription
Forgot your username?
Forgot your password?
Register