Skip to content

Instantly share code, notes, and snippets.

@matijs matijs/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overlay modals</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="overlay align-top">
<div class="modal">
<p>I am text</p>
</div/>
</div>
</body>
</html>
*,
*:after,
*:before { -moz-box-sizing: border-box; box-sizing: border-box; }
html { background-image: url(bg.jpg); background-size: cover; color: white; font-family: monospace; font-size: 120%; min-height: 100%; }
body { margin: 0; }
.overlay:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.overlay.align-top:before { vertical-align: top; }
.overlay { background-color: hsla(0,0%,100%,.2); font-size: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: center; }
.overlay.align-top { padding-top: 25%; }
.modal { background-color: hsl(0,0%,100%); border-radius: .5em; box-shadow: 0 0 0 1em hsla(0,0%,0%,.25); color: hsl(328,100%,54%); display: inline-block; font-size: 1rem; max-height: 100%; padding: 1em; text-align: left; width: 50%; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.