# Showing A Yes No Cancel Message Box

**URL:** <https://forums.creativeclouddeveloper.com/t/showing-a-yes-no-cancel-message-box/2224>\
**Category:** UXP Plugin API\
**Created:** [November 16, 2020, 2:56pm UTC](https://forums.creativeclouddeveloper.com/t/showing-a-yes-no-cancel-message-box/2224 "2020-11-16T14:56:26Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [November 16, 2020, 4:33pm UTC](https://forums.creativeclouddeveloper.com/t/showing-a-yes-no-cancel-message-box/2224/4 "2020-11-16T16:33:58Z")

</div>

A quick `prompt` function that might prove useful to you:

```auto
async function prompt(heading, body, buttons=["Cancel", "Ok"], options={title: heading, size: {width: 360, height: 280}}) {
    const [dlgEl, formEl, headingEl, dividerEl, bodyEl, footerEl] = 
        ["dialog", "form", "sp-heading", "sp-divider", "sp-body", "footer"]
        .map(tag => document.createElement(tag));
    [headingEl, dividerEl, bodyEl, footerEl].forEach(el => {
        el.style.margin="6px";
        el.style.width="calc(100% - 12px)";
    });

    formEl.setAttribute("method", "dialog");
    formEl.addEventListener("submit", () => dlgEl.close());

    footerEl.style.marginTop = "26px";

    dividerEl.setAttribute("size", "large");

    headingEl.textContent = heading;

    bodyEl.textContent = body;
    
    buttons.forEach((btnText, idx) => {
        const btnEl = document.createElement("sp-button");
        btnEl.setAttribute("variant", idx === (buttons.length - 1) ? (btnText.variant || "cta") : "secondary");
        if (idx === buttons.length - 1) btnEl.setAttribute("autofocus", "autofocus");
        if (idx < buttons.length - 1) btnEl.setAttribute("quiet");
        btnEl.textContent = (btnText.text || btnText);
        btnEl.style.marginLeft = "12px";
        btnEl.addEventListener("click", () => dlgEl.close((btnText.text || btnText)));
        footerEl.appendChild(btnEl);
    });

    [headingEl, dividerEl, bodyEl, footerEl].forEach(el => formEl.appendChild(el));
    dlgEl.appendChild(formEl);
    document.body.appendChild(dlgEl);

    return dlgEl.uxpShowModal(options);
}

const r = await prompt("Upload Large File", "This is a large file (over 100MB) -- it may take a few moments to upload.", ["Skip", "Upload"]);
if ((r||"Upload") !== "Upload") { /* cancelled or No */ }
else { /* Yes */ }

const r = await prompt("Delete File", "Are you sure you wish to delete this file? This action cannot be undone.", ["Cancel", {variant: "warning", text: "Delete"}]);
if ((r !== "Delete") { /* nope, don't do it! */ }
else { /* Do the delete */ }

```

---

_[View the full topic](https://forums.creativeclouddeveloper.com/t/showing-a-yes-no-cancel-message-box/2224)._