Skip to main content

Conditionally Open Modal Popups

Intro​

In a website, sometimes pop-up boxes (modals) appear. When they show up depends on certain situations, like when you successfully submit a form or make a mistake. This helps make sure you see important messages at the right times, making your experience on the website smoother.

In this video tutorial you will learn how to create Conditionally Open Modal events.

1. Create Modals​

Go to Snippets and create a Modal by choosing that option.

DrapCode Builder Modal Styling

2. Create Records of the same Collection​

Add records in your collection, as per your use case.

DrapCode Builder Modal Styling

3. View Data in Data Table​

Click Preview to view the records you have added from the collection to the Data Table.

DrapCode Builder Modal Styling

4. Create an Event to Open Modal​

Go to Events and Add Event. Name the event and click Create**.

Choose Snippet/Modal Popup --> Conditional Open Modal

DrapCode Builder Modal Styling

4.1 Link Collection & Modal in the Event​

Once the page opens add the collection to fetch data from, the fields of that collection and the modals created for those fields.

DrapCode Builder Modal Styling

5. Bind the Event to a Button​

Bind the event created above to the button in the Data Table.

DrapCode Builder Modal Styling

6. Preview the Changes​

Clicking the button will open different modals on the basis of the field value in your collection.

Conclusion​

Conditionally opening modals in a web app reduces interruptions, providing a more focused and user-friendly experience by showing relevant information only when needed.