Modals, like panels, are essential components in web applications, often used for tasks such as editing values, displaying messages, or gathering user input. While they may be slightly more complex than panels, they are still relatively straightforward to implement.

Before creating a modal, it's essential to understand how to trigger it on your page. Typically, modals are invoked using hyperlinks (a elements). To do this, create an a element and link it to your controller as usual. Then, add the class showModal to your a element, and the modal setup is nearly complete! You can also use icons to call your modal by adding a span element with appropriate icon classes inside the a element.

Creating a Modal

To create a modal, follow these steps:

1. Create a div element and give it the class modal-dialog.
2. Optionally, add a form element inside the modal if you need to submit data to the server. This should be nested inside the modal-dialog.
3. Create another div element with the class modal-header to define the header section. Nest this inside the modal-content or within the form if you added one.
4. Create a div element with the class modal-content. This contains the modal's main content and should also be nested inside the modal-dialog or form.
5. Create a div element with the class modal-footer to define the footer section. This should be nested inside the modal-content or within the form if applicable.
6. Include a button to close the modal. Create a button element with the attributes class="btn btn-info" and data-dismiss="modal". The button text should be "Cancel".
7. If you added a form to your modal, include an input element with the type set to submit. Add the classes btn btn-primary to style it as a primary button, and provide a value for the button text.

Once your modal's structure matches the code in the spoiler below, you've successfully created a modal.

<div class="modal-dialog">
	<div class="modal-content">
		@using (Html.BeginForm("action", "controller", null, FormMethod.Post, new { role = "form", @id = "formChange" }))
		{
			<div class="modal-header">
				<button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><i class="fal fa-times"></i></button>
				<h3 class="modal-title">title</h3>
			</div>

			<div class="modal-body">
				Content
			</div>

			<div class="modal-footer">
				<input type="submit" value="@Generic.Resources.Common.Button.Save" class="btn btn-primary" name="submitButton">
				<button type="submit" class="btn btn-info" data-dismiss="modal">@Generic.Resources.Common.Button.Cancel</button>
			</div>
		}
	</div>
</div>

Additionally, we provide a snippet for the HTML code of a modal to facilitate its implementation in Visual Studio.

Best Practices for Modal Usage

• Keep it Simple: Avoid overcrowding the modal with excessive content. Keep it focused on a single task or piece of information.
• Use Responsively: Ensure the modal is responsive and looks good on various screen sizes, from desktop to mobile devices.
• Provide Clear Actions: Clearly label buttons and actions within the modal to guide users on what to do next.
• Accessibility: Ensure the modal is accessible to all users, including those who rely on assistive technologies. Use appropriate ARIA attributes and keyboard navigation.
• Testing: Thoroughly test the modal functionality across different browsers and devices to ensure a consistent user experience.

Things to Avoid

• Overusing Modals: Avoid excessive use of modals, as they can disrupt the user flow and lead to user frustration.
• Hidden Navigation: Avoid hiding critical navigation or functionality within modals, as it may confuse users.
• Non-Responsive Design: Ensure the modal design adapts gracefully to different screen sizes and orientations.