benceg/index.html

## index.html
<!doctype html>

<html>

  <head>
    <link rel="stylesheet" href="modal.css">
  </head>

  <body>

    <a href="#modal-content" rel="modal:open">Click Me</a>

    <div id="modal-grab">I'm the modal content.</div>

    <div id="modal">
      <a rel="modal:close" href="#">Close</a>
      <div id="modal-content"></div>
    </div>

  </body>

</html>

## modal.js
function SimpleModal (userOptions) {
  'use strict';

  var settings = {
    'modal' : '#modal',
    'modalContent' : '#modal-content',
    'open' : '[rel="modal:open"]',
    'close' : '[rel="modal:close"]',
    'parent' : 'body',
    'class' : 'modal'
  };

  if (typeof userOptions === 'object') {
    for (var i in userOptions) {
      settings[i] = userOptions[i];
    }
  }

  var modal         = document.querySelector(settings.modal);
  var modalContent  = modal.querySelector(settings.modalContent);
  var open          = document.querySelectorAll(settings.open);
  var close         = document.querySelectorAll(settings.close);
  var parent        = document.querySelector(settings.parent);
  var href;

  var openEvent = function (e) {
    e.preventDefault();
    href = this.getAttribute('href');
    modalContent.innerHTML = document.querySelector(href).innerHTML;
    parent.classList.add(settings.class);
  };

  var closeEvent = function (e) {
    e.preventDefault();
    modalContent.innerHTML = '';
    parent.classList.remove(settings.class);
  };

  for (var i = 0; i < open.length; i++) {
    (function (_i) {
      open[_i].addEventListener('click', openEvent);
    })(i);
  }

  for (var i = 0; i < close.length; i++) {
    (function (_i) {
      close[_i].addEventListener('click', closeEvent);
    })(i);
  }

}

simpleModal({
  // override options here
});

## modal.scss
html,
body {
  width: 100%;
  height: 100%;
}

body {
  &:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,0,100,0.3);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s, z-index 0s 0.2s;
  }

  &.modal:after {
    z-index: 1;
    opacity: 1;
    transition: opacity 0.2s;
  }
}

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  background: #fff;
  z-index: -1;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;

  .modal & {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s, transform 0.2s;
  }
}

#modal-grab {
  display: none;
}
	<!doctype html>

	<html>

	<head>
	<link rel="stylesheet" href="modal.css">
	</head>

	<body>

	<a href="#modal-content" rel="modal:open">Click Me</a>

	<div id="modal-grab">I'm the modal content.</div>

	<div id="modal">
	<a rel="modal:close" href="#">Close</a>
	<div id="modal-content"></div>
	</div>

	</body>

	</html>
	function SimpleModal (userOptions) {
	'use strict';

	var settings = {
	'modal' : '#modal',
	'modalContent' : '#modal-content',
	'open' : '[rel="modal:open"]',
	'close' : '[rel="modal:close"]',
	'parent' : 'body',
	'class' : 'modal'
	};

	if (typeof userOptions === 'object') {
	for (var i in userOptions) {
	settings[i] = userOptions[i];
	}
	}

	var modal = document.querySelector(settings.modal);
	var modalContent = modal.querySelector(settings.modalContent);
	var open = document.querySelectorAll(settings.open);
	var close = document.querySelectorAll(settings.close);
	var parent = document.querySelector(settings.parent);
	var href;

	var openEvent = function (e) {
	e.preventDefault();
	href = this.getAttribute('href');
	modalContent.innerHTML = document.querySelector(href).innerHTML;
	parent.classList.add(settings.class);
	};

	var closeEvent = function (e) {
	e.preventDefault();
	modalContent.innerHTML = '';
	parent.classList.remove(settings.class);
	};

	for (var i = 0; i < open.length; i++) {
	(function (_i) {
	open[_i].addEventListener('click', openEvent);
	})(i);
	}

	for (var i = 0; i < close.length; i++) {
	(function (_i) {
	close[_i].addEventListener('click', closeEvent);
	})(i);
	}

	}

	simpleModal({
	// override options here
	});
	html,
	body {
	width: 100%;
	height: 100%;
	}

	body {
	&:after {
	position: fixed;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,0,100,0.3);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.2s, z-index 0s 0.2s;
	}

	&.modal:after {
	z-index: 1;
	opacity: 1;
	transition: opacity 0.2s;
	}
	}

	#modal {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 500px;
	height: 500px;
	margin: -250px 0 0 -250px;
	background: #fff;
	z-index: -1;
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;

	.modal & {
	z-index: 2;
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.2s, transform 0.2s;
	}
	}

	#modal-grab {
	display: none;
	}