Codly

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Modal window</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="container">
		<div class="modal-wrapper">
			<a href="#" data-target="#modal-window" class="open-modal btn-open">Open modal window</a>
		</div>
	</div>
	<div id="modal-window">
		<div class="overlay" data-hide="#modal-window"></div>
			<div class="modal-window-inner modal_div">
				<div class="modal-head">
					<h1>Заголовок модального окна</h1>
				</div>
				<div class="modal-text">
					<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Которой всемогущая за имени снова, пустился, запятых дороге, рукописи если своих парадигматическая свое подзаголовок которое? От всех большого власти ipsum за.</p>
				</div>
				<div class="modal-close">
					<a href="#" data-hide="#modal-window" class="close-modal btn-close">Закрыть</a>
				</div>
			</div>
	</div>
</body>
</html>

css

/*Style for modal window script*/
.modal-wrapper {
	text-align: center;
}

.btn-open {
	border: 1px solid #c6c6c6;
	background: #4d90fe;
	border-color: #3079ed;
	font-weight: bold;
	margin: 10px 0 0 0;
	padding: 10px 12px;
	cursor: pointer;
	border-radius: 2px;
	display: inline-block;
	color: #fff;
	transition: 0.3s;
	outline: none;
	text-decoration: none;
}

.btn-open:hover {
	background: #357ae8;
	border-color: #2f5bb7;
}

#modal-window {
	display: none;
}

.modal-window-open {
	display: block !important;
	transition: all 500ms ease-in-out 0s;
}

.modal-window-inner {
	border: 1px solid #000;
	max-width: 450px;
	height: 226px;
	border-radius: 5px;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	background: #fff;
	position: fixed;
	top: 50%;
	margin-top: -113px;
	left: 50%;
	margin-left: -225px;
	z-index: 5;
}


.modal-head h1 {
	color: #000;
	font-size: 24px;
}

.modal-head {
	border-bottom: 1px solid #ccc;
	padding: 10px;
}

.overlay {
	background: #40616f;
	height: 100%;
	width: 100%;
	cursor: pointer;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.8;
	z-index: 1;
}

.modal-text {
	padding: 10px;
}

p {
	text-align: justify;
	color: #000;
	font-size: 15px;
	line-height: 21px;
}

.modal-close {
	padding: 10px;
	border-top: 1px solid #fff;
	background: #f5f5f5;
}

.btn-close {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #bbbbbb;
  border-color: rgba(0, 0, 0, 0.6) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-bottom-color: #a2a2a2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

(function(){
	var showButtons = document.querySelectorAll('[data-target]'),
			closeButtons = document.querySelectorAll('[data-hide], .overlay'),
			j,
			i;

	//Открытие окна модального
	var openModal = function (e){
		e.preventDefault();
		var modal = document.querySelectorAll(this.getAttribute('data-target'));
		if (modal.length > 0) {
			modal[0].classList.add('modal-window-open');
		} else {
				for (i = 0; i < modal.length; i++){
					modal[i].classList.add('modal-window-open');
				};
		}
	};

	//На все кнопки с data-target вешаем открытие окна
	for (i = 0; i < showButtons.length; i++){
		var btn = showButtons[i];
		btn.addEventListener('click', openModal);
	};

	var closeModal = function (e){
		e.preventDefault();
		for(i = 0; i < closeButtons.length; i++){
			var modalHide = document.querySelectorAll(this.getAttribute('data-hide'));
			if (true) {
				for (j = 0; j < modalHide.length; j++){
					modalHide[j].classList.remove('modal-window-open');
				};
			}
		};
	};

	//На все кнопки с data-hide вешаем закрытие окна
	for (i = 0; i < closeButtons.length; i++){
		var btnClose = closeButtons[i];
		btnClose.addEventListener('click', closeModal);
	};

})();