Modals

Overview

Modals are versatile dialog prompts that can be used to display content, gather user input, or provide additional information without navigating away from the current page. They offer a focused and interactive way to engage users while maintaining context within the current view.

Key features of modals include:

• Overlay: Modals typically appear with a semi-transparent overlay that dims the background, focusing attention on the modal content.
• Customizable content: They can contain various elements such as text, images, forms, or even complex interactive components.
• Dismissible: Users can usually close modals by clicking outside the modal area, pressing the ESC key, or using a dedicated close button.
• Accessibility: When implemented correctly, modals should be fully accessible, with proper focus management and keyboard navigation.

Common use cases for modals include:

• Displaying additional details or media
• Collecting user input through forms
• Confirming user actions
• Presenting important notifications or alerts
• Sharing content on social media platforms

When using modals, it's important to consider user experience and ensure they enhance rather than disrupt the flow of interaction on your website or application.

Usage

To use modals in your project, follow these steps:

1. Ensure you have Bootstrap's CSS and JavaScript included in your project.
2. Use the data-bs-toggle="modal" and data-bs-target="#modalId" attributes on the trigger element (e.g., a button) to open the modal.
3. Create the modal structure using the provided HTML markup, giving it a unique id that matches the data-bs-target value.
4. Customize the modal content as needed within the modal's HTML structure.

Bootstrap's JavaScript will handle the modal's functionality, including opening, closing, and managing focus.

Share

This is a share modal that can be used to share content on social media platforms.

Modal email (admin only)

This is a modal email that can be used to send an email to the user.