Skip to content

Instantly share code, notes, and snippets.

@smagch

smagch/foobar.html

Created May 29, 2018 12:52
Show Gist options
  • Save smagch/689fcf299dcee9dd8315d9affd01e07a to your computer and use it in GitHub Desktop.
Save smagch/689fcf299dcee9dd8315d9affd01e07a to your computer and use it in GitHub Desktop.
Download ZIP
Modal
Raw
foobar.html
<html>
<head>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modal-content {
position: relative;
border: 1px solid #999;
max-height: 90vh;
top: 50%;
transform: translateY(-50%);
padding: 16px;
max-width: 768px;
margin: 0 auto;
width: 100%;
background: #fff;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
border-bottom: 1px solid black;
}
.body {
overflow-y: scroll;
}
.list-item {
height: 100px;
line-height: 100px;
border-bottom: 1px solid tomato;
}
</style>
</head>
<body>
<div class="modal-overlay">
<div class="modal-content">
<div class="header">hoge</div>
<div class="body">
<div class="list-item">アイテム1</div>
<div class="list-item">アイテム2</div>
<div class="list-item">アイテム3</div>
<div class="list-item">アイテム4</div>
<div class="list-item">アイテム5</div>
<div class="list-item">アイテム6</div>
<div class="list-item">アイテム7</div>
<div class="list-item">アイテム8</div>
<div class="list-item">アイテム9</div>
<div class="list-item">アイテム10</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment