Modals

J4 Modals Beta - Opening Modal from JS

John Bongiovanni

In J3 and the previous Modals, I would do something like this

{modal content="editform"
className="display-editform-modal" overlay="false"}
{/modal}

Then in Javascript to open the modal

jQuery('a[href=#editform]').click();

This doesn't work in J4 and the Beta version of Modals. Nothing happens, and there's no console error.

Peter van Westen ADMIN

1 year 4 months ago

Peter van Westen ADMIN

1 year 4 months ago

Please try the latest development version from:
regularlabs.com/development-releases

Then you can use the javascript API to open a modal:

RegularLabs.Modals.open(<element>)

For instance, you can do this (without using jQuery):

<button type="button" onclick="RegularLabs.Modals.open(document.querySelector('#editform-modal'));">
   Open the form
</button>

{modal id="editform-modal" content="editform" className="display-editform-modal" overlay="false"}{/modal}

{modalcontent editform}
...
{/modalcontent}

Please post a rating at the Joomla! Extensions Directory

John Bongiovanni

1 year 4 months ago

John Bongiovanni

1 year 4 months ago

I picked up this version
Modals-v12.0.0-dev2521608-PRO.zip
and I got this error trying to install it

Warning
JInstaller: :Install: Can't find XML setup file.
danger
Path does not have a valid package.
Unable to detect manifest file.

Peter van Westen ADMIN

1 year 4 months ago

Peter van Westen ADMIN

1 year 4 months ago

Try downloading it again…

Please post a rating at the Joomla! Extensions Directory

John Bongiovanni

1 year 4 months ago

John Bongiovanni

1 year 4 months ago

That worked, thanks. And it does open the modal.
My component needs to run on both Joomla 3 and Joomla 4 (at least for a while), so the JS has to figure out which way to open the modal.
I was thinking to just check that the function RegularLabs.Modals.open exists, unless you have a better suggestion.

Peter van Westen ADMIN

1 year 4 months ago

Peter van Westen ADMIN

1 year 4 months ago

Yeah, you could do something like:

if(window.RegularLabs && window.RegularLabs.Modals) {
   // J4
} else {
   // J3
}

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

Modals

J4 Modals Beta - Opening Modal from JS

M Modals