Show dialog without having a panel

My plugin is purely based on menu commands and I want to add a “Help” command, which would open a dialog by calling uxpShowModal(). But as there’s no HTML, where do I put my modal HTML so that I could access it and display?

Or would this be a proper way?

const dialog = document.createElement("div");
<...>
dialog.uxpShowModal();

Didn’t notice such case in the samples repo


No matter how I try, I get:

<…> uxpShowModal is not a function

:slightly_frowning_face:

I think uxpShowModal() is only defined for HTMLDialogElements.

1 Like

Thanks for the tip. This worked:

const dialogContents = `
    <sp-heading>Help</sp-heading>
    <sp-divider></sp-divider>
    <sp-body>Some text</sp-body>
`;

const dialog = document.createElement('DIALOG');
dialog.innerHTML = dialogContents;
document.body.appendChild(dialog);

dialog.uxpShowModal();

BTW, any idea where I can find uxpShowModal() available options? Only found two examples from @kerrishotts and @DavideBarranca and nothing in the docs :thinking:


Found show() and showModal() under JS reference for HTMLDialogElement. show() allows app UI interaction and showModal() does not. Still no available options listed, but what’s the difference between showModal() and uxpShowModal()? Both looks to be working the same. Tried uxpShow(), but this doesn’t exist

So is there a way to show a modeless popup dialog? I have working uxpShowModal dialogs but I really want one of them to be modeless.