How do I create an interactive pop-up window

XiaoNing · December 21, 2021, 2:43am

As stated in the title.
There may be a confirm and cancel button within the pop-up, which may each have their own event.

Karmalakas · December 21, 2021, 7:32am

HTML Lines 544-559

github.com

AdobeDocs/uxp-photoshop-plugin-samples/blob/main/ui-kitchen-sink/index.html#L544

    
      
          </div>
          <div class="sp-tab-page" id="sp-native-tab-page">
            <div class="group"><sp-label>Buttons</sp-label>
              <button>Hi</button>
            </div>
            <div class="group"><sp-label>Checkboxes</sp-label>
              <label><input type="checkbox">Check me</label>
              <label><input type="checkbox" checked>Check me</label>
              <label><input type="checkbox" disabled>Check me</label>
            </div>
            <div class="group"><sp-label>Dialogs</sp-label>
              <sp-detail>DIALOG EXAMPLE</sp-detail>
              <button id="btnOpenDialog">Open Dialog</button>
              <dialog id="dlgExample">
                <form method="dialog">
                  <sp-heading>Vectorize Images?</sp-heading>
                  <sp-divider size="large"></sp-divider>
                  <sp-body>Are you sure you want to vectorize the images? This might take some time.</sp-body>
                  <footer>
                    <sp-button variant="secondary" quiet>Don't Vectorize</sp-button>
                    <sp-button variant="cta">Vectorize</sp-button>

JS Lines 24-90

github.com

AdobeDocs/uxp-photoshop-plugin-samples/blob/main/ui-kitchen-sink/index.js#L24

    
      
              Array.from(document.querySelectorAll(".sp-tab-page")).forEach(tabPage => {
                if (tabPage.getAttribute("id").startsWith(theTab.getAttribute("id"))) {
                  tabPage.classList.add("visible");
                } else {
                  tabPage.classList.remove("visible");
                }
              });
            }
          });
          
          
// dialog handling
          document.querySelector("#btnOpenDialog").onclick = () => {
            document.querySelector("#dlgExample").uxpShowModal({
              title: "Dialog Example",
              resize: "none", // "both", "horizontal", "vertical",
              size: {
                width: 480,
                height: 240
              }
            });
          };

Topic		Replies	Views
Showing A Yes No Cancel Message Box UXP Plugin API	8	2108	June 11, 2021
I want to create a modal button that opens the add a layer style settings window UXP Plugin API uxp , javascript , api-feedback	4	373	January 5, 2023
Beginner question - buttons not responding Photoshop uxp	5	72	October 6, 2024
Accessing the close tab and close button in the uxp plugin UXP Plugin API ui , uxp , javascript	5	701	May 31, 2022
Question about migrating CEP plugin to UXP UXP Plugin API uxp	6	1267	December 22, 2021

How do I create an interactive pop-up window

Related topics