Simple, Minimalist Modal Box w/Slide-In Effect

vk-modal.css

.vk-modal--overlay {
    display: block;
    z-index: -1;
    position: fixed;
    top: 100%;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* background-color: rgba(252, 124, 86, 0.7); */
    background-color: rgba(17, 158, 230, 0.7);
    transition: all 250ms ease-in-out;
    /* transition: all 250ms ease-out; */
}

.vk-modal--open {
    z-index: 9999 !important;
    top: 0 !important;
}

.vk-modal {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    height: 80%;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}

.vk-modal--header {
    position: relative;
    display: block;
    padding-top: 15px;
}

.vk-modal--heading {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.vk-modal--close {
    position: absolute;
    top: 13px;
    right: 13px;
}

/* You must either import material icons into your project or change the icon font I used to close the modal to something else */
.vk-modal--close i.material-icons {
    font-size: 34px;
    width: 34px;
    height: 34px;
    color: #119ee6;
    transition: all 250ms ease-out;
}


.vk-modal--close i.material-icons:hover {
    cursor: pointer;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.vk-modal--body {
    padding: 30px;
}

vk-modal.html

  <div class="vk-modal--overlay">
    <div class="vk-modal">
      <div class="container-fluid">
        <div class="row">
            <div class="col-12 vk-modal--header">
                <h1 class="vk-modal--heading">Your Modal Heading</h1>
                <div class="vk-modal--close">
                    <i class="material-icons">close</i>
                </div>
            </div>
            <div class="col-12 vk-modal--body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <p>Your modal content goes here</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>

vk-modal.js

jQuery(document).ready(function( $ ) {
    $ = jQuery.noConflict();

    $('.your-modal-trigger').click(function() {
        // Open our Modal
        $('.vk-modal--overlay').addClass('vk-modal--open');
        $('body').addClass('modal-open');
    });

    // Close Get Started Modal Box
    $('.vk-modal--close').click(function() {
      $('.vk-modal--overlay').removeClass('vk-modal--open');
      $('body').removeClass('modal-open');
    });
});