On gists

Css modal window

CSS CSS trick

index.html Raw #

<!-- https://jsbin.com/pecarecezu/edit?html,css,output -->

<div class="modal">
  <div class="header">
    <h1>Some heading</h1>
  </div>
  <div class="content">
    <p>
      lorem
    </p>
  </div>
</div>

modal.css Raw #

body {
  background: #c8c8c8;
  letter-spacing: -1px;
  word-spacing: 4px;
}

.modal {
  background:white;
  position:fixed;
  top:50%;
  left:50%;
  box-sizing:border-box;
  transform: translate(-50%,-50%);
  width:600px;
  max-width:calc(100% - 80px);
  max-height:calc(100% - 100px);
  
}

.header {
  background: #ca12ea;
  color:white;
  padding: 15px 30px;
  height:45px
}

.content {
  padding:30px;
  color:#333;
  overflow:auto;
  max-height: calc(100vh - 215px);
  background: #fff;
}

h1 {
  margin:0;
}

p {
  margin-top:0;
}