Modal Centering Test

by Jayson Buquia

HTML

<div class="main">
    <div class="modal-toggle">
        Show modal
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat corrupti voluptate vitae maxime ea error pariatur cum ipsa ex dignissimos id temporibus nostrum voluptates debitis quia porro eaque animi alias.</div>
    <div>Fugit nisi neque eveniet aspernatur perferendis dignissimos laboriosam inventore minus consequuntur eos labore omnis laudantium eligendi natus nemo magnam distinctio! Quod repudiandae at sit ut sint ab aut ullam mollitia.</div>
    <div>Facilis dicta excepturi nostrum tempora accusamus aliquam illo iusto omnis modi. Molestiae sequi officiis perspiciatis fugit nostrum doloribus nemo iste animi minima iure ullam odit quasi? Alias incidunt modi esse.</div>
    <div>Dignissimos architecto quia similique maxime quam sunt temporibus esse quaerat laborum odit voluptate sit ullam mollitia fugiat asperiores ipsam facere quisquam eligendi necessitatibus nulla soluta et porro praesentium pariatur quos?</div>
    <div>A cumque excepturi tempore laboriosam rerum dolorum veritatis aperiam alias nobis officiis mollitia vel fugit nihil laborum magnam unde qui nostrum quae asperiores sequi in error deserunt necessitatibus labore incidunt.</div>
    <div>Assumenda iste nisi obcaecati eius officia omnis voluptatem suscipit veritatis nam ex sapiente molestiae alias nesciunt neque illo magnam iusto odit libero debitis quisquam deserunt nemo repellat quos soluta ipsa.</div>
    <div>Dolores mollitia recusandae neque dicta adipisci assumenda temporibus! Nulla harum officia recusandae eligendi ea quidem provident fugit eius odio accusantium quaerat iste repellendus placeat non doloremque voluptatem magnam illo praesentium.</div>
    <div>Voluptas perferendis suscipit fugiat nesciunt animi maxime repudiandae non tempore architecto nulla esse vitae consequatur id qui nobis magnam debitis doloremque iste accusamus eaque ratione tenetur ex pariatur unde omnis?</div>
    <div...

SCSS

* {
    padding: 0;
    margin: 0;
}

.main {
    color: green;
}

.modal-toggle {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid gray;
    cursor: pointer;
}

.modal-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    z-index: 9999999999;    
    background-color: rgba(255,255,255,0.9);
    
    &.is-open {
        display: block;
    }
}

.modal-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

.modal-content {
    display: table;
    min-height: 100%;
    width: 80%;
    margin: auto;
}

.modal-body {
    display: table-cell;
    min-height: 100%;
    vertical-align: middle;
    padding: 20px 0;
}

.contents {
    text-align: center;  
    color: black;
}

JavaScript

var $w = $(window),
			$d = $(document),
		    $html = $('html'),
		    $body = $('body'),
		    $toggle = $('.modal-toggle'),
		    $modal = $('.modal-container');

		$.fn.isOpen = function(){
		    return $(this).hasClass('is-open');
		};

		function getScrollbarWidth () {
			var offset = 0,
				$inner = $('<div>').css({'height':'200%','width':'100%'}),
				$outer = $('<div>').css({
					'height':50,
					'width':50,
					'visibility':'hidden',
					'position':'absolute',
					'overflow': 'scroll',
					'top':0,
					'left':0,
					'z-index':-500});

			$outer.appendTo($body).append($inner);
			offset = $outer.outerWidth() - $inner.outerWidth();
            $outer.remove();
			return offset;
		}

		$toggle.add($modal).on('click',function(e){
		    e.preventDefault();
		    
		    if ( $modal.isOpen() ) {
		        $modal.fadeOut(300,function(){
		            $modal.removeClass('is-open');
		            $html.css('overflow','auto');
		        	$body.css('padding-right',0);
		        });
		    } else {
		    	$html.css('overflow','hidden');
		    	$body.css('padding-right',getScrollbarWidth());
		        $modal.fadeIn(300,function(){            
		            $modal.addClass('is-open');		                        
		        });
		    }
		});