Skip to content

Instantly share code, notes, and snippets.

@roblafeve

roblafeve/modal_sans-js.html

Created November 10, 2013 23:57
Show Gist options
  • Save roblafeve/7405568 to your computer and use it in GitHub Desktop.
Save roblafeve/7405568 to your computer and use it in GitHub Desktop.
Download ZIP
A vertically-aligned, overflow-scrollable CSS-only modal.
Raw
modal_sans-js.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal Sans-JS</title>
<style>
* { box-sizing: border-box }
body {
background: #333;
margin: 0;
}
.layout-modal {
display: table;
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.layout-modal-alignment{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.layout-scroll {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.layout-scroll-a {
display: table;
width: 100%;
height: 100%;
border-spacing: 3em;
}
.layout-scroll-b {
display: table-cell;
vertical-align: middle;
}
.modal {
display: inline-block;
padding: 2em;
background: white;
border-radius: 4px;
max-width: 30em;
text-align: left;
-webkit-box-shadow: 0 5px 20px;
-moz-box-shadow: 0 5px 20px;
box-shadow: 0 5px 20px;
} .modal * { margin-bottom: 0 }
.modal *:first-child { margin-top: 0 }
</style>
</head>
<body>
<!-- Vertical Align & Scroll Context — Believe it or not, this structure is necessary (but it beats using JS to possition it). -->
<div class="layout-modal">
<div class="layout-modal-alignment">
<div class="layout-scroll">
<div class="layout-scroll-a">
<div class="layout-scroll-b">
<!-- Context Terminus -->
<!-- Modal Module :) -->
<div class="modal">
<h1>Modal Sans-JS</h1>
<p>It looks like this can be done without Javascript! Go ahead — add as much content as you want:</p><br>
p*30>lorem
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment