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.
-
Create a
div
element and give it the classmodal-dialog
. -
Optional: add a
form
to your modal if you need to submit data to the server. this needs to be nested inside themodal dialog
-
Create another
div
element and give it the classmodal-header
. This is going to be your header and has to be nested in yourmodal-content
or in yourform
if you decided to add a form. -
Create a
div
element and give it the classmodal-content
. Just like themodal-header
, this has to be nested inside yourmodal-content
orform
if you added a form. -
Create a
div
element and give it the classmodal-footer
. This will be your footer and has to be nested inside yourmodal-content
or in yourform
if you have one. -
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". -
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 classesbtn 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.