Modal Dialog - CSS Only

index.html

<div class="modal-container">
  <input id="modal-toggle" type="checkbox">
  <button>Click me</button> 
  <div class="modal-backdrop">
    <div class="modal-content">
      <label class="modal-close" for="modal-toggle">x</label>
      <h2>Modal title</h2><hr />
      <p>Hello from inside the modal!</p> 
      <label class="modal-close button" for="modal-toggle">OK</label>   
    </div>          
  </div>
</div>  

Modal Dialog - CSS Only.markdown

Modal Dialog - CSS Only

Simple CSS-only modal dialog.

A Pen by ekrof on CodePen.

License.

style.scss

*, *:before, *:after { box-sizing: border-box; }
body { height: 100vh; background: linear-gradient(white, #999); overflow: hidden; }

.modal-container {
  margin: 60px auto;
  padding-top: 0px;
  position: relative;
  width: 160px;    
  button {
    display: block;
    margin: 0 auto;      
    color: #fff;  
    width: 160px;
    height: 50px;    
    line-height: 50px;    
    background: #446CB3;
    font-size: 22px;       
    border: 0;
    border-radius: 3px;  
    box-shadow: 0 5px 5px -5px #333;  
    transition: background 0.3s ease-in;
  }
  .modal-backdrop { 
    height: 0; 
    width: 0; 
    opacity: 0;     
    overflow: hidden; 
    transition: opacity 0.2s ease-in; 
  }
  #modal-toggle {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    &:hover ~ button { 
      background: #1E824C; 
    }    
    &:checked {
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9;
      opacity: 0;          
    }
    &:checked ~ .modal-backdrop {
      background-color: rgba(0, 0, 0, 0.6);
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9;
      pointer-events: none;
      opacity: 1;
      .modal-content {
        background-color: #fff;
        max-width: 400px;
        width: 100%;
        height: 280px;
        padding: 10px 30px;
        position: absolute;
        left: calc(50% - 200px);
        top: 12%;
        border-radius: 4px;
        z-index: 999;
        pointer-events: auto;
        cursor: auto;
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);  
        @media (max-width: 400px) { left: 0; }  
        .modal-close {
          color: #666;
          position: absolute;
          right: 2px;
          top: 0;
          padding-top: 7px;
          background: #fff;
          font-size: 16px;
          width: 25px;
          height: 28px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
          &.button {
            top: initial;
            bottom: 20px;
            right: 30px;
            background: #4CAF50;
            color: #fff;
            width: 50px;
            border-radius: 2px;
            font-size: 14px;
            font-weight: normal;
            &:hover { 
              color: #fff; 
              background: #1E824C; 
            }
          }
          &:hover { color: #333; }
        }                     
      }        
    }
  }
}