modal
Modals should be consistent across products and vendors to benefit our readers. The modal organism is setup as a wrapper that provides consistent behavior but can accept any HTML. To allow for flexibility in function, we have created CSS classes like .screen that act as toggles for different behavior.
EXAMPLE
HTML
<div id="main-modal" class="s-modal screen" hidden>
<div class="card horizontal impact modal-subscription">
<figure>
<img src="https://www.kansascity.com/latest-news/wuji4q/picture225576030/alternates/LANDSCAPE_768/inspections%202.jpg">
</figure>
<div class="package marketing">
<h1>Local news that matters to you</h1>
<p class="summary">Get all the important news and updates in your community for just <b>$2 a week</b>.</p>
<a href="#" class="button stretch">Subscribe Now</a>
<a href="#" class="summary underline">Already a subscriber? Sign in</a>
<a href="#" class="small">Terms and conditions apply</a>
</div>
<svg class="close" onclick="toggleModal('main-modal')" width="20" height="20" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="white"/></svg>
</div>
</div>JavaScript
function toggleModal(id, force) {
let m = document.getElementById(id);
if(m) {
if(force === true || force === false) {
m.hidden = !force;
} else {
m.hidden = !m.hidden;
}
if(m.classList.contains("screen")) {
document.body.classList.toggle("freeze", !m.hidden);
}
}
}
Bottom version
EXAMPLE
HTML
<div id="bottom-modal" class="s-modal bottom modal-newsletter" hidden>
<div class="impact">
<div class="package">
<h1>Get the afternoon update</h1>
<p class="summary">The afternoon's latest local news</p>
<form class="grid">
<input class="summary" type="email" placeholder="Email Address">
<input type="submit" class="button" value="Sign Up">
</form>
<a href="#" class="small">Terms and conditions apply</a>
<svg class="close" onclick="toggleModal('bottom-modal')" width="20" height="20" viewBox="0 0 352 512"><path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" fill="white"/></svg>
</div>
</div>
</div>
Local news that matters to you
Get all the important news and updates in your community for just $2 a week.
Subscribe Now Already a subscriber? Sign in Terms and conditions apply