Skip to content

Instantly share code, notes, and snippets.

@belfie13
Created October 22, 2018 17:18
Show Gist options
  • Save belfie13/f3c5a52b70358b6d88a6585957d3d16a to your computer and use it in GitHub Desktop.
Save belfie13/f3c5a52b70358b6d88a6585957d3d16a to your computer and use it in GitHub Desktop.
Modal View With CSS
<!doctype html>
<html lang=en>
<head>
<title></title>
<style>
#modal {
display: none;
}
#modal:target {
display: initial;
}
.modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
.modal-content {
position: fixed;
top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
}
</style>
</head>
<body>
<a href=#modal>show modal</a>
<div id=modal>
<a href=#><div class=modal-background></div></a>
<div class=modal-content>content</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment