Search
Other Modals questions
Forum

Close modal from a new page within the modal

Laurent Suppan's Avatar Laurent Suppan
Hello,

I've thought this through a bit better than the last time (sorry... 🤔 ) and tried many solutions but am stuck:

I have created a modal within a page, which works perfectly well. The modal displays a web page which links to a second one. On this second page, I have tried to create a "Close" button using on-click="parent.jQuery.rl_modals.close();" or just on-click="jQuery.rl_modals.close();" but could not get the button to work.

What did I miss?

Thanks a lot for your support! 🙂
Peter van Westen's Avatar Peter van Westen ADMIN
Check your browser's console to see if you get any javascript errors.
Please post a rating at the Joomla! Extensions Directory
Laurent Suppan's Avatar Laurent Suppan
Excellent, thank you (you're amazingly fast!) 🙂

Actually, I've found a workaroung by using a full-size iFrame - so problem solved 😁
Peter van Westen's Avatar Peter van Westen ADMIN
Ok, great!
Please post a rating at the Joomla! Extensions Directory
Jim Owens's Avatar Jim Owens
I'd like to follow up with the "Close modal from a new page within the modal" question if I may.

I am using a modal as an iframe to a page on the same site. I'd like to be able to initiate a close from within the iframe but I'm running into origin errors DOMExcption blocked with origin https://same site ...from accessing a cross-origin frame.

I get this with the Close attempt using parent.jQuery.rl_modals.close(); from the inspect console while in the context of the iframe. I don't think it's "illegal" to call the parent when the parent is from the same origin as your iframe modal is.

Any recommendations on how to do this? Your close button "x" is in the parent frame and I can call jQuery.rl_modals.close(); from the parent context in console of inspect successfully.

It's a contact page and I would like to initiate a close on completion of the submission of the form

Thoughts?
Greg's Avatar Greg
I'm want to close the modal when this link in the modal is clicked.
<a href="#" onclick="jQuery.rl_modals.close();">Close modal</a>


But I get this error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'close')
at HTMLAnchorElement.onclick
Peter van Westen's Avatar Peter van Westen ADMIN
If you have the link inside the module using iframes, you need to use:
parent.jQuery.rl_modals.close()
Please post a rating at the Joomla! Extensions Directory
Greg's Avatar Greg
I tried that too. Same error.
Greg's Avatar Greg
I should add that I'm using Sourcerer within the {modal-content} tags. Otherwise it strips out the code.
Peter van Westen's Avatar Peter van Westen ADMIN
Do you have this online so I can take a look?
Please post a rating at the Joomla! Extensions Directory
Greg's Avatar Greg
Yes but can I send it privately?
Greg's Avatar Greg
I emailed it to
Peter van Westen's Avatar Peter van Westen ADMIN
In both cases you are not using an iframe, so it should be:
jQuery.rl_modals.close()

The reason it isn't working is because your template is loading another jquery file, after Joomla's own jquery file and Modals has been loaded.
That overrides the jQuery object and causes issues.
So the solution: remove the lines in your template file that are loading the jQuery scripts.
Lines 64 and 65 in the HTML output of that page you linked to.
Please post a rating at the Joomla! Extensions Directory
Peter van Westen's Avatar Peter van Westen ADMIN
PS: You can use the 'Confidential information' button in the forum editor to hide sensitive information.
Please post a rating at the Joomla! Extensions Directory
Greg's Avatar Greg
Thanks! That fixes it.

Didn't see the confidential info button!
Greg's Avatar Greg
Having trouble again. I've moved the modal to the live website now but it's not opening. Are you able to have a look?

Confidential information:
(hidden)
Greg's Avatar Greg
Confidential information:
(hidden)
Peter van Westen's Avatar Peter van Westen ADMIN
Please try to replicate the issue on a page where you are loading the Modals stuff normally. Preferably first using the Joomla core template.
Now you are mucking around again with loading an external jquery file and commenting out the Modals scripts it needs to function.
Please post a rating at the Joomla! Extensions Directory
Greg's Avatar Greg
Sorry I was trying to troubleshoot it. It seems to work on a blank page using Protostar but not with the site template. Looks like it loading everything to me.

Confidential information:
(hidden)
Greg's Avatar Greg
Confidential information:
(hidden)
You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription