<div id="modal-00" class="modal modal--shown dashboard-modal">
<div class="modal__overlay modal__trigger" data-id="modal-00"></div>
<div class="modal__window">
<button class="modal__close modal__trigger" data-id="modal-00"></button>
<div class="modal__content">
<h3>Know more: Location</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr class="separator-light">
<div class="dashboard-modal__groups">
<div class="dashboard-modal__group">
<div class="dashboard-modal__stat">
<span>
<div class="icon">
<i class="material-icons icon__mat-icon">add_location</i>
</div>
</span>
<span>Includes grant location codes</span>
<span class="dashboard-modal__stat-value-placeholder">00%</span>
</div>
</div>
<div class="dashboard-modal__group">
<h4 class="dashboard-modal__subtitle">This means</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
<h4 class="dashboard-modal__subtitle">This is useful because</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
</div>
</div>
<hr class="separator-light">
<div class="dashboard-modal__groups">
<div class="dashboard-modal__group">
<div class="dashboard-modal__stat">
<span>
<div class="icon">
<i class="material-icons icon__mat-icon">add_location</i>
</div>
</span>
<span>Includes grant location codes</span>
<span class="dashboard-modal__stat-value-placeholder">00%</span>
</div>
</div>
<div class="dashboard-modal__group">
<h4 class="dashboard-modal__subtitle">This means</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
<h4 class="dashboard-modal__subtitle">This is useful because</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
</div>
</div>
<hr class="separator-light">
<div class="dashboard-modal__groups">
<div class="dashboard-modal__group">
<div class="dashboard-modal__stat">
<span>
<div class="icon">
<i class="material-icons icon__mat-icon">add_location</i>
</div>
</span>
<span>Includes grant location codes</span>
<span class="dashboard-modal__stat-value-placeholder">00%</span>
</div>
</div>
<div class="dashboard-modal__group">
<h4 class="dashboard-modal__subtitle">This means</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
<h4 class="dashboard-modal__subtitle">This is useful because</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
</div>
</div>
</div>
</div>
</div>
<div id="modal-00" class="modal modal--shown dashboard-modal">
<div class="modal__overlay modal__trigger" data-id="modal-00"></div>
<div class="modal__window">
<button class="modal__close modal__trigger" data-id="modal-00"></button>
<div class="modal__content">
<h3>Know more: Location</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
{% render '@separator' %}
{% for ii in range(3) %}
<div class="dashboard-modal__groups">
<div class="dashboard-modal__group">
<div class="dashboard-modal__stat">
<span>{% render '@icon', { icon_name: 'add_location' } %}</span>
<span>Includes grant location codes</span>
<span class="dashboard-modal__stat-value-placeholder">00%</span>
</div>
</div>
<div class="dashboard-modal__group">
<h4 class="dashboard-modal__subtitle">This means</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
<h4 class="dashboard-modal__subtitle">This is useful because</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec quis ultricies vitae maecenas.</p>
</div>
</div>
{% if ii < 2 %}
{% render '@separator' %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
/* No context defined. */
document.querySelectorAll('.modal__trigger').forEach(function(el) {
el.onclick = function(){
const target = el.getAttribute('data-id');
const modal = document.getElementById(target);
const body = document.getElementsByTagName('body');
if (modal.hasAttribute('aria-hidden')) {
modal.removeAttribute('aria-hidden')
modal.classList.add('modal--shown');
body[0].classList.add('modal--shown');
} else {
modal.setAttribute('aria-hidden', '')
modal.classList.remove('modal--shown');
body[0].classList.remove('modal--shown');
}
};
});
// Maybe we should move the class toggling to the <body> element,
// and deal with the displays at the CSS level.
// This will minimize JS intervention in the DOM, and possibilitate the
// Overflow: hidden; for the <body> without new JS lines
.modal {
transition: all .4s ease;
align-items: center;
justify-content: center;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100vw;
height: 100vh;
&__overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background-color: hsla(var(--white-hsl), .4);
}
&__trigger { cursor: pointer; }
&__close {
cursor: pointer;
background-color: unset;
padding: unset;
border: unset;
float: right;
&:after {
@extend .u-material-icons;
content: 'close';
}
}
&__window {
position: relative;
padding: 40px;
max-height: 90vh;
max-width: $single-column;
overflow-y: scroll;
background-color: hsla(var(--white-hsl), 1);
box-shadow: 8px 8px 32px hsla(var(--base-hsl), .1);
}
}
.modal.modal--shown { display: flex; }
body.modal--shown { overflow: hidden; }
No notes defined.