Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningModals
Modals are extremely useful components, but it's easy to overdo them. Each of us knows furiously intrusive pop-up ads that make us leave the website immediately. So in this lesson, we will learn how to use them correctly.
Step 1 - create an empty Project modals section
Directly below the My projects section, add an empty Projects Modals section.
Note that we do not add a bottom margin to this section, as this section will not render directly on the page. Modals are invisible by default and only clicking on the trigger activates them and makes them visible. Therefore, adding a margin to the section containing modals would be pointless, since at first glance it is just an empty section.
<!-- Section: Projects modals -->
<section class="">
</section>
<!-- Section: Projects modals -->
Step 2 - add a modal
From the modals documentation page, copy HTML code of the Basic example code and insert it into the Project modals section.
<!-- Section: Projects modals -->
<section class="">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init
data-mdb-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init
data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Projects modals -->
After saving the file, you will not see the modal, but the button, which is the so-called trigger.
Only when you click on the trigger will the modal appear.
Let's take a closer look at the construction of a modal.
-
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in
the document and remove scroll from the
<body>so that modal content scrolls instead. - Clicking on the modal “backdrop” will automatically close the modal.
-
Modals use
position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a.modalwithin another fixed element.
Below is a static modal example (meaning its position and
display have been overridden). Included are the modal header, modal body
(required for padding), and modal footer (optional). We ask that you include
modal headers with dismiss actions whenever possible, or provide another explicit dismiss
action.
As you can see the modal with its header, body and footer construction resembles the card construction we learned about in the previous lesson.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init
data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
Note that each modal must have its own individual ID. In the above case id="exampleModal" .
Then we can use this ID and use data-attributes to define what should be the trigger (that is, clicking on what element should trigger the modal).
In this case, we use a regular button and add 2 attributes to it:
data-mdb-target="#exampleModal"to specify exactly what modal (with what ID) should be launched from this triggerdata-mdb-modal-initis an attribute necessary to initialize the basic functionality of the modal
data-mdb-ripple-init is optional and is used to initialize the ripple effect in the button
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-modal-init data-mdb-ripple-init
data-mdb-target="#exampleModal">
Launch demo modal
</button>
Step 3 - use the card as a trigger
The trigger doesn't have to be a button. It can be, for example, a picture in a card.
In the My projects section, then the tabs in the first column, to the <a href=""> element, add the attributes from the button to turn the photo into a trigger.
You can also remove the button itself as we no longer need it.
<!-- First column -->
<div class="col-lg-4 col-md-12 mb-6 mb-lg-0">
<div class="card rounded-6 h-100">
<div class="bg-image hover-overlay ripple mx-3 shadow-4-strong rounded-6 mt-n3" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/new/textures/small/148.jpg" class="w-100" />
<!-- Add attributes here -->
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
Now when you click on the image in the tab you will run the modal.
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.