How to open Modal in panel (2.2)

Hello,

have seen the post Webmaster Tools - custom field

nice buttons! :smile:
i have the idea to open a own modal with buttons like this to show… stuff.

somebody can give me some hints how to open a modal in panel 2.2 and inject my own content. (just display and a close button… no need of much logic there)

greetings,
svnt

The default panel modal in 2.2 is opened through a link with the right data attribute and the content as href, e.g.:

<a href="panel/pages/about/toggle" data-modal="true">…</a>
1 Like

what js is executed then? how to inject own content?
can you point me to some source lines on github? would be great!

thx a lot!

Okay,

so first the JS that defines the standard panel modals can be found in this file: https://github.com/getkirby/panel/blob/develop/assets/js/src/components/modal.js

And is initialized here: https://github.com/getkirby/panel/blob/develop/assets/js/src/app.js#L18-L19
and applied to all links with the data-modal attribute here: https://github.com/getkirby/panel/blob/develop/assets/js/src/app.js#L46-L48

Getting custom content inside is probably a little harder. First off, I have never tried it myself. So the following is just me guessing, sharing thoughts, might be completely wrong.

It would make most sense to register custom panel routes that point to your modal content. This seems to be rather tricky from a plugin. Cause I think the plugins are initialized before the panel itself. Maybe you could rather use a custom widget as a container from where you set those custom routes. How a widget files looks: https://github.com/getkirby/panel/blob/develop/app/widgets/license/license.php

And I’ll need to dig in a lil deeper to find any example how to add custom panel routes.