Hi everyone,
I’m trying to get a button to close a sidebar modal that I have successfully opened.
The modal opens with no problems but no matter what I try, I can’t get the button to close it.
The modal code is, I’ve added two different buttons to show what I’ve tried:
import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
import { HeaderAppModalData, HeaderAppModalValue } from "./headerapp-modal.token";
@customElement('headerapp-element')
export class HeaderAppModal
extends UmbModalBaseElement<HeaderAppModalData, HeaderAppModalValue>{
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
}
override render() {
return html`
<umb-body-layout headline=${this.localize.term('user_chooseUserGroup', true)}>
<uui-box>
Something here
</uui-box>
<div slot="actions">
<uui-button
label="OK"}
look="primary"
color="positive"
@click=${this.modalContext?.reject()}></uui-button>
<uui-button
label="OK"}
look="primary"
color="positive"
@click=${this._rejectModal}></uui-button>
</div>
</umb-body-layout>
`;
}
}
export default HeaderAppModal;
declare global {
interface HTMLElementTagNameMap {
'headerapp-element': HeaderAppModal;
}
}
I’ve had a look at the Umbraco source code to see how they handle closing sidebar modals and this looks pretty similar but never works,
I open the modal via a header app :
<button @click=${this.#onClick}>BUTTON</button>
#onClick() {
console.log('Break button clicked');
this._triggerModal();
this._dispatchBreakEvent();
}
private _triggerModal = () => {
this.#modalManagerContext?.open(this, HEADERAPP_MODAL_TOKEN, {
data: {
headline: 'Relaxation time',
}
});
}
What am I missing?
Thanks.
O.
warren
(Warren Buckley)
March 29, 2025, 8:41pm
2
Hey Owain
Are you trying to use the button that opened the modal to toggle closing the modal?
If you want a button in the modal itself to close itself you can do something like this.
private handleClose() {
this.modalContext?.reject({ type: "close" } as UmbModalRejectReason);
}
import { customElement, html, state } from "@umbraco-cms/backoffice/external/lit";
import { UmbModalBaseElement, UmbModalRejectReason } from "@umbraco-cms/backoffice/modal";
import { tryExecuteAndNotify } from "@umbraco-cms/backoffice/resources";
import { TemplateResult, css } from "lit";
import { ExaminePeekModalData, ExaminePeekModalValue } from "./examinepeek.modal.token.ts";
import { ExaminePeekService, ISearchResult } from "../api/index.ts";
import { UUIButtonElement } from "@umbraco-cms/backoffice/external/uui";
@customElement("examine-peek-modal")
export class ExaminePeekmModalElement extends UmbModalBaseElement<ExaminePeekModalData, ExaminePeekModalValue>
{
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
This file has been truncated. show original
1 Like
Thanks @warren
I’m wanting a button on the modal to close it. I’ll give your solution a bash tomorrow. Appreciate you taking the time to answer :H5YR:
warren
(Warren Buckley)
March 29, 2025, 9:07pm
4
Is the repo public?
Happy to take a quick look
1 Like
Na. It’s private just now.
I’ll maybe make it public if I can’t get any further
1 Like
Gave this a go tonight and when I click the close button, with a breakpoint put on
private handleClose() {
this.modalContext?.reject({ type: "close" } as UmbModalRejectReason);
}
I do hit the method but modalContext
is undefined and so does nothing.
warren
(Warren Buckley)
March 31, 2025, 7:06am
7
Hmmm interesting….
What’s the entire file and lets see what’s up
1 Like
@OwainWilliams In your original code snippet, I notice a curly brace after the label="OK"}
attribute… I’m wondering if that’s causing an issue here?
Otherwise, either @click=${this._rejectModal}
or @click=${this._submitModal}
should work, (as long as your modal element is extending from UmbModalBaseElement<>
).
1 Like
Hi both,
I’ve pushed my code up to github.
The full modal file is :
import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
import { UmbModalBaseElement} from "@umbraco-cms/backoffice/modal";
import { HeaderAppModalData, HeaderAppModalValue } from "./headerapp-modal.token.ts";
@customElement('headerapp-element')
export class HeaderAppModal
extends UmbModalBaseElement<HeaderAppModalData, HeaderAppModalValue>{
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
}
override render() {
return html`
<umb-body-layout headline="It's a modal, but not as you know it!">
This file has been truncated. show original
I had tried _rejectModal
in the past, as I could see that worked from the Umbraco source code but I’m clearly missing something as the modal still doesn’t close. I’m extending from UmbModalBaseElement
too.
warren
(Warren Buckley)
March 31, 2025, 10:02am
10
Ok seen your codebase a little better.
I would make your life easier to begin with and use this file that is the modal to have the html you want in there. Rather than adding another HTML element inside this element. It may be causing some of the problems you might be seeing, as always good to simplify things and get it working first IMO.
import { customElement, html } from "@umbraco-cms/backoffice/external/lit";
import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
import { HeaderAppModalData, HeaderAppModalValue } from "../headerapp/headerapp-modal.token";
import "./headerapp";
@customElement('headerapp-modal')
export class headerappModal extends UmbModalBaseElement<HeaderAppModalData, HeaderAppModalValue>{
render() {
return html`
<headerapp-element></headerapp-element>
`;
}
}
export default headerappModal;
1 Like
Simple when you rethink things
The nested elements were obviously causing an issue and I never thought about moving the render out to the initial call. Good to know for future.
That fixed it. Thanks @warren
1 Like
system
(system)
Closed
April 30, 2025, 10:24am
12
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.