There are no notes for this item.
<div class="overlay">
<div class="overlay__container animated fadeIn">
<span class="overlay__close">×</span>
<p class="overlay__content">This is where the text would go to explain the details</p>
</div>
</div>
<script>
var overlayClose = document.getElementsByClassName("overlay__close");
var overlayCloseOne = overlayClose[0];
var overlayContainer = document.getElementsByClassName("overlay__container");
var overlayContainerOne = overlayContainer[0];
overlayCloseOne.onclick = function() {
overlayContainerOne.classList.add("fadeOut");
};
</script>
/*------------------------------------*\
#CONTEXTUAL OVERLAY
\*------------------------------------*/
.overlay {
background-color: $background-overlay;
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
}
.overlay__container {
background-color: $background-default;
position: absolute;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
margin: 45px 0 45px;
width: calc(100% - 50%);
height: 65%;
left: 25%;
right: 25%;
}
.overlay__close {
font-size: 25px;
font-weight: 900;
top: 15px;
position: absolute;
right: 5px;
line-height: 0;
display: block;
cursor: pointer;
}
.overlay__content {
margin: 30px 15px 20px;
background-color: $background-popup;
height: calc(100% - 30px - 20px);
text-align: center;
padding: 15px;
}