Opening Modals with Data Attributes

Article author
Josh Lopez
  • Updated

Memberstack provides several pre-built modals that can be opened using data attributes. These modals provide a quick way to add login, signup, profile, and forgot password forms to your site.

Login Modal

The login modal allows users to log into their account. To open the modal, add the data-ms-modal="login" attribute to a link or button:

<a data-ms-modal="login" href="#">Login</a>

Signup Modal

The signup modal allows users to create a new account. To open the modal, use data-ms-modal="signup":

<a data-ms-modal="signup" href="#">Signup</a>

Profile Modal

The profile modal allows logged in users to update their account. To open the modal, use data-ms-modal="profile":

<a data-ms-modal="profile" href="#">Profile</a>

Forgot Password Modal

The forgot password modal allows users to reset their password via email. To open the modal, use data-ms-modal="forgot-password":

<a data-ms-modal="forgot-password" href="#">Forgot Password</a>

Was this article helpful?



Please sign in to leave a comment.