<!-- Modal trigger - anchor by default -->
<a class="show-modal" href="#modal">Show Modal</a>

<!-- The modal, wrapped in an overlay -->
<div class="overlay">
  <div class="modal" id="modal">
    <!-- close trigger -->
    <div class="close">
      <span>X</span>
    </div>
    <!-- modal content -->
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est vitae, iure quae nostrum cupiditate, debitis facere, qui sit optio quibusdam molestias veniam illo. Obcaecati ea aspernatur beatae fugit consequatur!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est vitae, iure quae nostrum cupiditate, debitis facere, qui sit optio quibusdam molestias veniam illo. Obcaecati ea aspernatur beatae fugit consequatur!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est vitae, iure quae nostrum cupiditate, debitis facere, qui sit optio quibusdam molestias veniam illo. Obcaecati ea aspernatur beatae fugit consequatur!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed est vitae, iure quae nostrum cupiditate, debitis facere, qui sit optio quibusdam molestias veniam illo. Obcaecati ea aspernatur beatae fugit consequatur!</p>
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
}

.modal {
  position: relative;
  padding: 20px;
  width: 50%;
  max-height: 80vh;
  overflow-y: scroll;
  background: #f2f2f2;
}

.close {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background: #f2456f;
}
.close:hover {
  cursor: pointer;
}

//when js is working
//hide the overlay - which contains the modal
.js .overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
}
//turn the modal to position absolute - it will be positioned horizontally in the JS based on the window dimensions
.js .modal {
  position: absolute;
  top: 20px;
  left: 50%;
}
.js .close {
  display: block;
}

var $modal = $('.modal'),
    $overlay = $('.overlay'),
    $showModal = $('.show-modal'),
    $close = $('.close');
    
//show modal and set dimensions based on window
$showModal.on('click', function(e){
  e.preventDefault();
  
  var windowHeight = $(window).height(),
      windowWidth = $(window).width(),
      modalWidth = windowWidth/2; //50% of window
  
  $overlay.show();
  $modal.css({
    'width' : modalWidth,
    'margin-left' : -modalWidth/2
  });
});
//close on click of 'x'
$close.on('click', function(){
  $overlay.hide();
});
//close on click outside of modal
$overlay.on('click', function(e) {
  if (e.target !== this) return;
  $overlay.hide();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js