Modal Component

Contributed by Richard Lee

Introduction

The Blocks Modal component is a simple modal that can be used to display a message or a form. The component is fully customisable with the ability to change the title, body, and buttons. It is also responsive and has a mobile view.

The design philosophy of the Modal component is to be as simple as possible. It is not meant to be a full-featured modal component. Instead as previously mentioned, it is meant to be a simple modal component that can be used to display a message or a form and at the same time, be fully customisable.

The Modal component is designed for both mobile and desktop. It is responsive and will adjust to the screen size.

The Modal component has the following optional properties:

• title - the title of the modal
• body - the body of the modal
• buttons - an array of buttons to be displayed in the modal
• show - a boolean value that determines whether the modal is shown
• hidden - a boolean value that determines whether the modal is closed

Simple Modal

The Simple Modal component contains a title, body, and buttons. The title and body are optional. The buttons are an array of buttons to be displayed in the modal, and they are also optional. We designed this component so that it can be used to showcase the simple message and for the user to decide on their response to the message.

You can configure the Simple Modal component by filling in the properties listed in the Introduction section.

Simple Modal With Picture

The Simple Modal With Picture component is a variation of the Simple Modal component. This means it was built on top of the Simple Modal component. The Simple Modal With Picture component also contains a title, body, and buttons. The title and body are optional. The buttons are an array of buttons to be displayed in the modal. And they are also optional.

You can configure the Simple Modal With Picture component by filling in the properties listed in the Introduction section.

Confirm Modal

The Confirm component is a specialised modal designed for confirming actions. It provides a clear way for users to confirm or cancel an action before proceeding. The component inherits the basic modal structure and allows customisation of the confirmation message and button labels.

In our example, we showcased the Confirm component when used to submit a student application, specifically, we notified the student that they cannot make any changes to their application once they have submitted it.

The Confirm component supports the following properties:

• Title - the title of the modal
• Message - the confirmation message to be displayed
• Confirm Label - the label text for the confirmation button
• Cancel Label - the label text for the cancel button

Notice Modal

The Notice component is a straightforward modal designed for displaying important notices or alerts to the user. It is a simple way to convey information that requires the user's attention.

The Notice component inherits the basic modal structure and allows customisation of the notice content and button labels.

In our example, we showcased the Notice component when used to notify the student that they have successfully submitted their application.

The Notice component supports the following properties:

• Title - the title of the modal
• Content - the content or notice message to be displayed
• Okay Label - the label for the OK button (in this case, we used the word "Close")

Login Modal

The Login component is a specialised modal designed for user authentication. It provides fields for the user to input their credentials and login to the system. The component inherits the basic modal structure and allows customisation of the login form and button labels.

In our example, we have used the Login component to create a simple login form for the University of Sydney Student Login. The form has two fields, one for the UniKey and one for the Password. The form also has a button to handle the login action.

The Login component supports the following properties:

• Title - the title of the modal
• Username Label - the label for the Username field (in this case, we used the word "UniKey")
• Password Label - the label for the Password field
• Login Button - a button to handle the login action

Signup Modal

The Signup component is a specialised modal designed for user registration or sign-up. It provides fields for the user to input their email details and sign up for the system. The component inherits the basic modal structure and allows customisation of the sign-up form and button labels.

In our example, we have used the Signup component to create a simple sign-up form for the University of Sydney Student System. The form only have one field, which is the Student Email. The form also has a button to handle the sign-up action.

The Signup component supports the following properties:

• Title - the title of the modal
• Email Label - the label for the Email field
• Signup Button - a button to handle the sign-up action (in this case, we used the word "Continue")

Usability

The Modal component is designed to be responsive and will adjust to the screen size. This component is designed to be used in a variety of situations, and we have followed the official guidelines from W3 to design this component.

The Modal component is a simple yet powerful component. Specifically, it is great for displaying a simple message or a form to the user. It is also fully customisable, which means the developer can change the title, body, and buttons to suit their needs.

For example, when the developer wants to display a simple message to the user, they can use the Simple Modal component. When the developer wants to display a simple message with a picture to the user, they can use the Simple Modal With Picture component. So on and so forth.

The font used in this component is Inter, which is a font designed for screens. It is a sans-serif font that is easy to read on screens. You can find the font in the link tag in the head tag of the index.html file.

All images in the example include alt tags, which is a requirement for accessibility. The alt tag is used to describe the image to the users, and it is used by screen readers to describe the image to the users. We strongly recommend the alt tags not be deleted or modified when using this component code.

Please include the following HTML code in the head tag of your index.html file to ensure the component is responsive, this is a requirement for accessibility and is recommended by W3:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Version