Modals, We love them, just like panels. Modals are commonly used to edit values. Modals are a bit more difficult to use than panels, but they're still quite easy. Before we go and create a modal we have to call it on our page, we usually use hyperlinks to do that (a elements).
You might ask, how am I supposed to do that? It is really quite easy. You create an a element and route it to your controller like you normally would. When you're done doing that you simply add class showModal to your a element and you're pretty much done! If you want to use an icon to call your modal you can add a span element to your a element and use classes to add icons to it.

So, now you want to know how to create a modal. They are very simple to create, follow these steps if you want to know how to create modals.

1. Create a div element and give it the class modal-dialog.
2. Optional: add a form to your modal if you need to submit data to the server. this needs to be nested inside the modal dialog
3. Create another div element and give it the class modal-header. This is going to be your header and has to be nested in your modal-content or in your form if you decided to add a form.
4. Create a div element and give it the class modal-content. Just like the modal-header, this has to be nested inside your modal-content or form if you added a form.
5. Create a div element and give it the class modal-footer. This will be your footer and has to be nested inside your modal-content or in your form if you have one.
6. We allways add a button to close our modals with. Create a button element and add these attributes to your button: class="btn btn-info" data-dismiss="modal" The text inside this button should be "Annuleren".
7. This last step is only required if you've added a form to your modal. Create an input element and as type it should be submit, add classes btn btn-primary to it and give it a value. the value will be shown as text on this button.

If your code looks like the code in the spoiler, congratulations, you've sucessfully 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>

We've also got a snippet for the html code in a modal. If you want to learn more about how to use snippets in Visual Studio, please click the link in the footer.