<button class="dialog__trigger">Open Dialog</button>

<div class="dialog">
  <span class="dialog__close">&#x2715;</span>
  <h2 class="dialog__title">This is a title</h2>
  <p class="dialog__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit necessitatibus illo deleniti doloremque culpa voluptas recusandae, sunt eligendi amet, ut modi voluptatibus ipsa quas voluptatem consectetur atque, velit reprehenderit debitis.</p>
  <button class="dialog__action">Read more &#8594;</button>
</div>  

$bg-color: #f1f1f1;
$text-color: #333333;
$highlight-color: #E74C3C;

@import 'https://fonts.googleapis.com/css?family=Cairo|Slabo+27px';

* {
  box-sizing: border-box;
}

body {
  background: $bg-color;
  color: $text-color;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog__trigger, .dialog__action {
  border: 3px solid $text-color;
  background: $bg-color;
  padding: 15px 20px;
  font-size: 1.1rem;
  text-transform: uppercase;
  display: block;
  transition: all 150ms ease-out;
  transform: translateY(0px);
  &:hover, &:focus {
    outline: 0;
    transform: translateY(-5px);
    transition: all 100ms ease-in;
    box-shadow: 0 5px 10px rgba($text-color,0.4);
  }
  &:active {
    transform: translateY(-3px);
  }
}

.dialog {
  background: $bg-color;
  width: 70%;
  position: absolute;
  left: calc(50% - 35%); // half of the container width - 70%
  top: 0;
  padding: 30px;
  box-shadow: 0 10px 30px rgba($text-color,0.4);
  border: 3px solid $text-color;
  visibility: hidden;
  opacity: 0;
  transition: all 180ms ease-in;
  @media(max-width: 600px) {
    width: 90%;
    left: calc(50% - 45%) // half of the container width - 90%
  }
  &.dialog--active {
    top: 10%;
    visibility: visible;
    opacity: 1;
    transition: all 250ms ease-out;
  }
  .dialog__close {
    font-size: 2rem;
    line-height: 2rem;
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    padding: 15px;
    transition: color 150ms ease;
    &:hover {
      color: $highlight-color;
    }
  }
  .dialog__title {
    font-size: 2rem;
    font-family: 'Slabo 27px', serif;
    font-weight: 100;
    margin: 0;
    padding: 0 0 15px 0;
    border-bottom: 2px solid $text-color;
  }
  .dialog__content {
    font-size: 1.1rem;
    line-height: 2rem;
  }
  .dialog__action {
    margin: 0;
    font-size: 1rem;
  }
}

function dialog() {

  // Declare variables
  var dialogBox = $('.dialog'),
      dialogTrigger = $('.dialog__trigger'),
      dialogClose = $('.dialog__close'),
      dialogTitle = $('.dialog__title'),
      dialogContent = $('.dialog__content'),
      dialogAction = $('.dialog__action');

  // Open the dialog
  dialogTrigger.on('click', function(e) {
    dialogBox.toggleClass('dialog--active');
    e.stopPropagation();
  });

  // Close the dialog - click close button
  dialogClose.on('click', function() {
    dialogBox.removeClass('dialog--active');
  });

  // Close the dialog - press escape key // key#27
  $(document).keyup(function(e) {
    if (e.keyCode === 27) {
      dialogBox.removeClass('dialog--active');
    }
  });

  // Close the dialog - click outside
  $(document).on('click', function(e) {
    if ($(e.target).is(dialogBox) === false &&
        $(e.target).is(dialogTitle) === false &&
        $(e.target).is(dialogContent) === false &&
        $(e.target).is(dialogAction) === false) {
      dialogBox.removeClass('dialog--active');   
    }
  });

}

// Run function
$(dialog);