<div class="flex">
  <div class="modalcontainer">
    <div class="flex">
      <div class="modal">
        <div class="close"><span>&#43;</span></div>
        <div class="content">
        <h2>Modal title</h2>
        <p>Let's go up in here, and start having some fun The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. It's a super day, so why not make a beautiful sky?</p>
          </div>
        <div class="buttons">
          <a href="#0">Cancel</a>
          <a href="#0">Accept</a>
        </div>
      </div>
    </div>
  </div>
  <a href="#0" class="modalbttn">Open Modal</a>
</div>

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600';

$font:'Source Sans Pro', sans-serif;
$primary:#FF0072;
$secondary:#4d5c6e;
$text:#72879e;
$green:#00c06d;
  
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body{
    height:100%;
    width: 100%;
}

a {
  color:#FFF;
  text-decoration:none;
  &:hover {
    text-decoration:none;
  }
}

body {
  padding:0px;
  margin:0;
  font-family:$font;
  background: #644cad;
  background: -moz-linear-gradient(left, #644cad 0%, #4426a8 100%);
  background: -webkit-linear-gradient(left, #644cad 0%, #4426a8 100%);
  background: linear-gradient(to right, #644cad 0%, #4426a8 100%);
  -webkit-font-smoothing: antialiased;
}

h2 {
  margin-top:0px;
  color:$secondary;
  font-weight:400;
}

p {
  color:$text;
  font-size:16px;
  line-height:24px;
}

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.flex {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modalcontainer {
  display:none;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(0,0,0,0.5);
  &.active {
    display:block;
  }
}

.modal {
  display:none;
  position:relative;
  width:600px;
  height:330px;
  background-color:#FFF;
  &.active {
    display:block;
  }
  .content {
    padding:30px;
  }
  .close {
    font-family:$font;
    cursor:pointer;
    color:#FFF;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    position:absolute;
    right:0;
    color:#999;
    font-size:40px;
    span {
        transform:rotate(45deg);
        display:block;
    }
  }
  .buttons {
    width:600px;
    position:absolute;
    bottom:0;
    height:50px;
    background-color:#FFF;
    a {
      width:50%;
      height:50px;
      line-height:50px;
      text-align:center;
      float:left;
      background-color:#EEE;
      color:$secondary;
      transition:0.3s;
      text-transform:uppercase;
      font-weight:bold;
      &:hover {
        background-color:darken(#EEE,5%);
      }
      &:nth-of-type(2) {
        float:right;
        color:#FFF;
        background-color:$green;
        &:hover {
          background-color:darken($green,5%);
        }
      }
    }
  }
}

.modalbttn {
  background-color:#24252A;
  padding:12px 25px;
  text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,0.2);
  border-bottom:1px solid rgba(0,0,0,0.2);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius:4px;
  &:hover {
    background-color:lighten(#24252A,3%); 
    
  }
}

$(".modalbttn").click(function() {
  $(".modalcontainer,.modal").fadeIn("slow");
});

$(".close,.buttons").click(function() {
  $(".modalcontainer,.modal").fadeOut("slow");
});