Modal Experiment

Just playing with modal ideas.

by Travis Almand

HTML

<div id='content'>
    <h1>Content</h1>
    <p><a href='#' id='modalLink'>Modal Link</a></p>
    <h2>Sub Title</h2>
    <p>Integer varius id nisi id sagittis. In hac habitasse platea dictumst. Aenean et dignissim nulla, vitae ultrices dui. Suspendisse vitae nisi eleifend, consequat quam at, bibendum ipsum. Praesent tempus sapien volutpat, aliquet diam ac, faucibus lorem. Curabitur dictum, nisl at lacinia mollis, lacus tortor ornare urna, vel suscipit ipsum metus non tortor. Nam purus turpis, accumsan ac velit non, pretium dictum erat. Pellentesque posuere felis orci, eget blandit nisi feugiat tempor. Maecenas nec egestas elit. Aenean at dui diam. Mauris eu velit non turpis bibendum cursus. Donec massa ante, venenatis et urna volutpat, consectetur eleifend ligula. Phasellus consectetur vel arcu vel imperdiet. Vestibulum metus elit, mattis sit amet consectetur vel, pellentesque in metus. Vestibulum a accumsan est, vitae varius augue.</p>
    <p>Nam vehicula ullamcorper augue in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu dignissim quam. In hac habitasse platea dictumst. Curabitur in nisi erat. Vivamus ac hendrerit risus. Phasellus pellentesque tincidunt massa a ullamcorper. In hendrerit feugiat placerat. Proin consectetur in ipsum non facilisis. Suspendisse ac ornare turpis, in pretium libero. Donec id massa in est luctus vulputate id ut urna. Quisque eu nunc porttitor, vehicula felis non, interdum odio. Phasellus rhoncus urna urna, ac molestie massa fermentum placerat.</p>
    <p>Nunc nibh ante, gravida in lectus in, cursus elementum metus. Praesent vestibulum quam sed nibh blandit, nec molestie libero accumsan. Maecenas dictum leo tortor, non ultrices ligula sagittis vitae. Donec id adipiscing erat. Nam adipiscing bibendum eros id ornare. Vivamus libero purus, ornare non metus non, lacinia tempor risus. Sed venenatis erat dolor. Sed eget fringilla erat. Mauris ut lorem in nunc cursus mollis ut vitae...

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

html, body {
    background: black;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

#content {
    background: white;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding: 20px;
    position: fixed;
    transition: transform .5s;
    top: 0;
    width: 100%;
}

#modal {
    background-color: white;
    display: none;
    height: 200px;
    left: calc(50% - 150px);
    opacity: 0;
    position: absolute;
    top: calc(50% - 100px);
    transition: opacity 1s;
    width: 300px;
    z-index: 20;
}

#modalBack {
    background: black;
    height: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .5s;
    width: 0;
    z-index: 10;
}

JavaScript

var content = document.getElementById('content');
var modalLink = document.getElementById('modalLink');
var modal = document.getElementById('modal');
var modalBack = document.getElementById('modalBack');

modalLink.addEventListener('click', function (e) {
    e.preventDefault();
    content.style.transform = 'scale(.8)';
    content.style.opacity = 0.5;
    modal.style.display = 'block';
    modal.style.opacity = 1;
    modalBack.style.height = '100%';
    modalBack.style.width = '100%';
    modalBack.style.opacity = .75;
});

modalBack.addEventListener('click', function () {
    content.style.transform = 'scale(1)';
    content.style.opacity = 1;
    modal.style.display = 'none';
    modal.style.opacity = 0;
    modalBack.style.height = 0;
    modalBack.style.width = 0;
    modalBack.style.opacity = 0;
});