Working with Memberstack DOM Package Modals

Memberstack provides pre-built user interface (UI) modals that you can use for common flows in your application like signing up new users, logging in existing users, and handling forgotten passwords. This article will explain what modals are, how to open Memberstack's built-in modals, how to customize them, how to close them programmatically, and how to access data returned from modal events like signing up.

View the full DOM Package Website for more additional guidance. 

Note: The Memberstack DOM Package can be accessed through the Webflow Package as well by using window.$memberstackDom.openModal("SIGNUP") instead of memberstack.openModal("SIGNUP").

What is a modal?

A modal is a dialog box or popup window that appears on top of the main view of a web page. When a modal opens, it prevents the user from interacting with the page behind it until the modal is closed. Modals are commonly used for things like:

• Signup/login forms
• Displaying messages or notifications
• Getting user input on a focused task

Modals create a separate layer on top of the existing page and capture the user's attention for critical information or tasks.

Opening Memberstack's pre-built modals

Memberstack provides several pre-configured modals that you can launch in your application using the openModal() method:

// Open the signup modal 
memberstack.openModal("SIGNUP"); 

// Open the login modal 
memberstack.openModal("LOGIN"); 

// Open the forgot password modal 
memberstack.openModal("FORGOT_PASSWORD"); 

// Open the reset password modal 
memberstack.openModal("RESET_PASSWORD");

The openModal() method accepts the name of the modal you want to open. The modals will open on top of your existing page.

Customizing the modals

You can customize the signup and login modals by passing a configuration object as the second parameter to openModal():

// Add a signup link in the login modal 
memberstack.openModal("LOGIN", { signup: { plans: ["plan1", "plan2"] } }); 

// Pre-select a plan for the signup modal 
memberstack.openModal("SIGNUP", { signup: { plans: ["plan1"] } });

The configuration object lets you tailor the modals for your specific application's user flows.

Closing modals programmatically

Modals opened through the Memberstack DOM package do not close automatically. To close a modal programmatically, call the hideModal() method:

memberstack.hideModal();

For example, you may want to close a modal after the user successfully signs up or logs in:

// Open login modal 
memberstack.openModal("LOGIN"); 

// Listen for login promise resolution 
memberstack.openModal("LOGIN").then((loginData) => { 
  console.log("User logged in!", loginData); 
  // Close modal after login 
  memberstack.hideModal(); 
  });

Handling data returned from modals

When a user signs up or logs in via a modal, these events return promises that resolve with data about the event:

// Open signup modal 
memberstack.openModal("SIGNUP") 
// Handle returned data 
.then((signupData) => { 
  console.log("User signed up!", signupData); 
});

This allows you to access information like the newly created member object after a successful signup.

Hope this helps explain how to work with Memberstack's out-of-the-box modals! 

Check out the other articles in this series:

1. Getting Started with the Memberstack DOM Package (Front-end API)
2. Working with Memberstack DOM Package Modals
3. Managing App Data with the Memberstack DOM Package
4. Member Authentication with the Memberstack DOM Package
5. Member Billing and Checkout with the Memberstack DOM Package
6. Member Management with the Memberstack DOM Package
7. Events and Webhooks with Memberstack DOM