Search…
How-to Invoke a modal Dialog Box from a Button Click
Use case: Display a modal dialog box based on a user action such as button click, etc.
TL;DR: Here are some high-level steps on how to do this. Look in the next section for detailed instructions:
  1. 1.
    Create a Figma Component with a simple button and a separate form that’ll be used to display as a modal dialog box
  2. 2.
    Export the component to Quest. Within Quest editor, select the Contact Us form layer in the left side panel and set the Dialog Feature on the form as shown below.
  3. 3.
    Add onClick binding to the simple button to display the modal dialog box. Set the data.isOpen to “true” in the onClick function handler. In the “On Close” handler, set the data.isOpen to “false”. When done, your component should function like below where a modal dialog box is displayed over your web page.
Detailed Instructions: In this example, we’ll demonstrate how to display a Contact Us form when the user clicks the “CONTACT SUPPLIER” button.
Step 1:
Create a simple Catalog Request component called "DialogDemo" in Figma as shown below. We will be adding logic to the “CONTACT SELLER” button to invoke the modal dialog box. Create a separate component to be used as the “Contact Us” form and add this component to the Catalog Request component.
Step 2:
Invoke the Quest plugin from within Figma, and Export the Catalog Request Component into Quest. You must also export the “Contact Us Form” component into Quest. When done, click on the “View in Quest” button to see the Catalog Request component in Quest.
Step 3:
In the Quest editor, Select the “Contact Seller” button and add the onClick binding as shown below.
Step 4:
Now, let’s define the Dialog feature on the Contact Us form as shown below:
Step 5:
Export both the Catalog Request and Contact Us form components. Now we’ll add the handler logic for the onClick binding and Dialog feature. The isOpen boolean will control when the Contacts Us Dialog display. The handleContactSeller function will set the isOpen to true and cause the dialog box to be displayed. The handleCloseDialog will cause the dialog box to close.
import React, {useState} from "react";
const useDialogDemo = () => {
let data: any = {};
const [isOpen, setIsOpen] = useState(false);
data.isOpen = isOpen;
const handleContactSeller = (): any => {
setIsOpen(true);
};
const handleCloseDialog = (): any => {
setIsOpen(false);
};
const getMaxWidth = (): any => {
return "200px";
};
let fns: any = {handleContactSeller, handleCloseDialog, getMaxWidth};
return {data, fns};
}
export default useDialogDemo;
Step 6:
Next step is to export the code using the “Download” button
as shown below for both the Catalog Request and Contact Us components. You can also download the entire App if you prefer.
Final Step 7:
Drop the generated code into your local react environment and test it out. When you click the “CONTACT SELLER” button, you should see the below dialog box over the Catalog Request page.
Copy link