Modais responsivos Easy Peasy (baterias incluídas)

HTML

<button id="launch-modal">
  Launch Modal
</button>

<div id="modal-background" class="vertical-align">

  <div id="modal">

    <button id="close-modal">  
      Close Modal
    </button>

    <h3>
      This is a modal
    </h3>

    <p>
      Text goes here or whatever you want...
    </p>

  </div>

</div>

CSS

#modal-background {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
}

#modal {
  display: none;
  width: 500px;
  height: 500px;
  background-color: #FFF;
  position: relative;
  z-index: 10001;
}

.vertical-align {
  font-size: 0;
}

.vertical-align:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.vertical-align > * {
  display: inline-block;
  vertical-align: middle;
  font-size: medium;
}

@media all and (max-width: 500px) {

  #modal {
    width: 100%;
    height: 100%;
  }

}

JavaScript

// Query the DOM
var launchModalButton = document.getElementById('launch-modal'),
    modalBackground = document.getElementById('modal-background'),
    modal = document.getElementById('modal'),
    closeButton = document.getElementById('close-modal');

// Show Modal
launchModalButton.onclick = function() {
  modalBackground.style.display = 'block';
  modal.style.display = 'inline-block';
};

// Hide Modal
closeButton.onclick = function() {
  modalBackground.style.display = 'none';
  modal.style.display = 'none';
};