By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Modals
Overview
Modals are pop-up containers and can be used for displaying more content without changing the page. They usually start as a hidden element and change their visibility when an event is triggered by the user.
Toggle Full Modal
Full Modal Open
<a href="#" data-toggle="show" data-target=".full-modal" role="button" aria-expanded="false" aria-controls="header-sub-menu">Toggle Full Modal</a>
<div class="full-modal">
<h1>Full Modal Open</h1>
</div>.full-modal {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 99;
transition: opacity 0.4s ease;
pointer-events: none;
width: 100%;
height: auto;
background-color: $yellow;
color: $black;
}
.full-modal.show {
pointer-events: all;
opacity: 1;
}
Toggle Side Modal
- Side
- Modal
- Opened
<a href="#" data-toggle="show" data-target=".side-modal" role="button" aria-expanded="false" aria-controls="side-modal">Toggle Side Modal</a>
<div class="side-modal">
<ul>
<li>Side</li>
<li>Modal</li>
<li>Opened</li>
</ul>
</div>.side-modal {
position: absolute;
top: 50%;
left: -100%;
opacity: 1;
z-index: 99;
transition: left 0.4s ease;
pointer-events: none;
width: 30%;
height: auto;
}
.side-modal.show {
pointer-events: all;
left: 0;
}
They should have their visibility defined in the corresponding CSS class and change using the .show class.
They should be triggered by another element.
Copied to clipboard