Modal Responsive

HTML

<p>Scroll down for button</p>
<button class="open-modal">Button!</button>


<div class="modal-container dp-none">
    <div class="modal">
        <button class="close-modal">Button!</button>
        test
    </div>
</div>

CSS

body {
    height: 1000px;
    background: lightblue;
}

.body-locked {
    overflow: hidden;
}

.modal-container {
    display: none;
    overflow-y: scroll;
    position: fixed;
    top: 0; right: 0;
    height: 100%; width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
}

.modal {
    height: 800px;
    width: 300px;
    margin: 50px auto;
    background: indianred;
}

/*helper styles*/

.dp-none {
    display: none !important;
}

.dp-block {
    display: block !important;
}



/*placed .open-modal at 400px so we can see page remains in same position on when modals opened*/
.open-modal{
    position: relative;
    top: 400px;
}

JavaScript

var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal'),
    close_modal = $('.close-modal'),
    modal_container = $('.modal-container'),
    toggleModal = function() {
        body.toggleClass('body-locked');
        modal_container.toggleClass('dp-block');
    };

open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);